-1

我们正在使用以下脚本在我的页面上设置颜色主题。当用户单击一个按钮并在 HTML 上设置一个类时。当用户单击另一个按钮时，它会改为设置该类名。这工作正常。

<script type="text/javascript">
    if (localStorage.buttonColor) {
        document.getElementsByTagName('html')[0].className = localStorage.buttonColor
    }
    function getButtonColor(buttonName) {
        localStorage.buttonColor = buttonName;
        document.getElementsByTagName('html')[0].className = buttonName
    }
</script>

如果按钮颜色有一个 localstorage 值，那么它会设置类。但是，我们还需要它来禁用按钮。我们如何根据 localstorage 的值使其禁用按钮？

此外，如果用户单击一个按钮，那么我们希望禁用该按钮，并启用所有其他具有“主题”类的按钮。我们正在寻找一个仅限 JavaScript 的解决方案。

这是HTML：

<form class="ng-pristine ng-valid">
   <button class="theme" name="darkBlue" onclick="getButtonColor(this.name)">Blue</button>
   <button class="theme" name="black" onclick="getButtonColor(this.name)">Black</button>
</form>

这是一个解决方案，但这并不是我们所需要的全部，因为我们现在决定给按钮一个类名，以便更容易选择它们。此外，这仅适用于从本地存储获取，如果用户单击它，我们仍然需要禁用一个按钮并启用所有其他按钮。

if (localStorage.buttonColor) {
    document.getElementsByTagName('html')[0].className = localStorage.buttonColor
    var buttons = document.body.getElementsByTagName('form')[0].getElementsByTagName('button')
    for(var i =0; i < buttons.length; i++)
        if(buttons[i].name == localStorage.buttonColor) button.disabled = true
}
4

4 回答 4

1 
<script type="text/javascript">

function muteButtons(buttonObj)
{
    buttons = buttonObj.parentNode.getElementsByTagName('button');
    for(i=0;i<buttons.length;i++){
        buttons[i].disabled=true;
    }
    buttonObj.disabled=false;
}

function restoreButtons(linkObj)
{
    buttons = linkObj.parentNode.getElementsByTagName('button');
    for(i=0;i<buttons.length;i++){
        buttons[i].disabled=false;
    }
}

</script>


<div id="example">
    <button id="b1" onclick="muteButtons(this)">Button 1</button><br />
    <button id="b2" onclick="muteButtons(this)">Button 2</button><br />
    <span id="restore" onclick="restoreButtons(this)">restore buttons</span>
</div>

禁用按钮的问题在于，一旦它们被禁用......它们就会被禁用。所以来回切换成为一个问题。因此，为了将按钮重新“打开”，我添加了第二个功能，该功能将恢复所有按钮。

于 2013-10-10T20:19:21.707 回答
0 
<script type="text/javascript">
    if (localStorage.buttonColor) {
        document.getElementsByTagName('html')[0].className = localStorage.buttonColor;

    }
    function getButtonColor(element) {
        localStorage.buttonColor = element.name;
        document.getElementsByTagName('html')[0].className = element.name;

        var element_id = element.id;

        if (element_id == "darkBlue") {
            document.getElementById("darkBlue").disabled = true;
            document.getElementById("black").disabled = false;
        }
        if (element_id == "black") {
            document.getElementById("black").disabled = true;
            document.getElementById("darkBlue").disabled = false;
        }
    }

于 2013-10-10T21:24:58.720 回答
0

您可以执行某种 if 语句来确定是否要启用/禁用按钮。

document.getElementById("id").setAttribute("disabled", "true")

如果您需要禁用/启用所有按钮，那么您可以执行“getElementByTagName”来查找您正在寻找的元素并像以前一样遍历它们。

编辑：根据之前的帖子

删除禁用属性的正确方法是：

element.removeAttribute("disabled");

可以通过这些方式中的任何一种来设置 disabled 属性（所有相同的结果）

.setAttribute("disabled", "true")
.setAttribute("disabled", "false")
.setAttribute("disabled", "disabled")
于 2013-10-10T20:24:54.370 回答
0

将 HTML 更改为此

<form class="ng-pristine ng-valid">
   <button class="theme" name="darkBlue" onclick="getButtonColor(this)">Blue</button>
   <button class="theme" name="black" onclick="getButtonColor(this)">Black</button>
</form>

JavaScript：

function getButtonColor(element) {

    localStorage.buttonColor = element.name;
    document.getElementsByTagName('html')[0].className = element.name;

    // Enable other elements
    var toenable = document.querySelectorAll(".theme");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }

    // Disable current element
    element.setAttribute("disabled", "disabled");
}
于 2013-10-10T20:29:35.550 回答