JavaScript 全部开/关按钮

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');
});

引用资料:

• > addClass() .
• > removeClass() .
• > val() .