Question

我想每次在按钮上切换两个框的颜色。 Box1有效，但Box2不起作用。

$(function () {
    $(':button').click(function(e) {
        e.preventDefault();                    
        let box1 = $('#box1');
        let box2 = $('#box2');
        if ($(box1).hasClass('pink') || $(box2).hasClass('yellow')) {
            $(box1).toggleClass('yellow');
            $(box2).toggleClass('pink');
        } 
        return false;
    });
});

Answer 1

默认情况下，您的#box1的类别为yellow，而#box2的类别为pink。因此，您可以像下面这样简单地纠正它，而无需添加任何if条件。

$(function () {
  $(':button').click(function(e) {
    e.preventDefault();                    
    $('#box1').toggleClass('yellow pink');
    $('#box2').toggleClass('pink yellow');
    return false;
  });
});

Answer 2

类yellow的样式似乎比类pink的样式具有更高的优先级，因此即使您将pink类添加到box2，样式也具有较高的优先级yellow类将覆盖其样式，而box1类的样式将被更新。

尝试关注

$(function() {

  $(':button').click(function(e) {
    e.preventDefault();
    let box1 = $('#box1');
    let box2 = $('#box2');
    $(box1).toggleClass('pink yellow');
    $(box2).toggleClass('yellow pink');
    return false;
  });
});

div {
  height: 100px;
  width: 100px;
}

.pink {
  background-color: pink;
}

.yellow {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Toggle</button>
<div id="box1" class="pink"></div>
<div id="box2" class="yellow"></div>

切换onClick功能

2 个答案: