Question

我有6个按钮，我希望创建一个主按钮，打开或关闭所有其他按钮。我设法做到这一点，但是当主按钮关闭时，如果它已经打开，则会遇到问题。无论以前的状态如何，我都需要使用此按钮打开或关闭所有按钮。按钮7将作为主按钮。感谢您抽出宝贵时间阅读本文，我们非常感谢您的帮助。

//master button

function button7(){
    currentvalue = document.getElementById('button7').value;
      if(currentvalue == "Off"){
        document.getElementById("button7").value="On";
      }else{
        document.getElementById("button7").value="Off";
      }
    }
    $(document).ready(function(){
                $('#button7').on('click', function(){
                    $('#button7').toggleClass('on');
                    $('#button1').toggleClass('on');
                    $('#button2').toggleClass('on');
                    $('#button3').toggleClass('on');
                    $('#button4').toggleClass('on');
                    $('#button5').toggleClass('on');
                    $('#button6').toggleClass('on');
                    if(currentvalue == "Off"){
                    alert("off")
                }
                    else{
                    alert("on")
                }
        });
    });


//regular button  

function button1(){
        currentvalue = document.getElementById('button1').value;
          if(currentvalue == "Off"){
            document.getElementById("button1").value="On";
          }else{
            document.getElementById("button1").value="Off";
          }
        }
        $(document).ready(function(){
                    $('#button1').on('click', function(){
                        $(this).toggleClass('on');
                        if(currentvalue == "Off"){
                        alert("off")
                    }
                        else{
                        alert("on")
                    }
            });
        });

Answer 1

如果要将所有按钮设置为特定状态，请不要使用toggleClass()，正如名称本身所示，它用于切换类名。代替：

$('#button7').on('click', function(){
    // select all the elements by their id:
    $('#button1,#button2,#button3')
    // remove both classes:
    .removeClass('on off')
    // add the class that the clicked-button currently represents:
    .addClass(this.value)
    // whatever Boolean the button currently represents,
    // switch to the other option:
    .val(this.value === 'On' ? 'Off' : 'On');
});

参考文献：

Answer 2

在按钮上切换类，检查它是否具有该类，并使用它在所有其他按钮上添加或删除该类。使用布尔值作为toggleClass的第二个参数将根据布尔值添加或删除类，而不是类的存在。

$(document).ready(function(){
  $('#button7').on('click', function(){
    $('#button7').toggleClass('on');
    var currentvalue = $('#button7').hasClass('on');
    $('#button1').toggleClass('on', curentvalue);
    $('#button2').toggleClass('on', curentvalue);
    $('#button3').toggleClass('on', curentvalue);
    $('#button4').toggleClass('on', curentvalue);
    $('#button5').toggleClass('on', curentvalue);
    $('#button6').toggleClass('on', curentvalue);
    if (currentvalue){
      alert("on")
    } else {
      alert("off")
    }
  });
});

JavaScript全部开/关按钮

2 个答案: