Question

所以基本上，我希望它根据我的选择改变类。当我第一次更改它时，它会将类从black更改为colored，但当我将其更改回来时，它会同时保留black和colored。

有人可以解释为什么会发生这种情况，因为我删除了所有关于更改的类，然后再次调用hover()，然后根据我的选择应用类。显然，如果我删除removeClass方法的评论，它会有效，但我不明白为什么我需要它。提前谢谢。

HTML：

 <form>
     <select name="color">
         <option value="black-white">Black/White</option>
         <option value="colored">Colored</option>
     </select>
     <input type="checkbox" checked>Borders (on/off)
 </form>

jQuery的：

function hover() {
    var color = $("select[name=color]").val();

    if (color === "black-white") {
         $("#container > div").hover(function() {
             /*$(this).removeClass("colored");*/
             $(this).addClass("black");    
         });
    } else if (color === "colored") {
        $("#container > div").hover(function() {
            /*$(this).removeClass("black");*/
            $(this).addClass("colored");
        });
    }
}

$("select[name=color]").change(function() {
    $("#container > div").removeClass();
    hover();
});

Answer 1

你不能在事件处理程序中绑定事件处理程序，并期望它更改，两个事件处理程序，以及更改select时可能会更多，将绑定到元素，它们不会消失。

你必须绑定处理程序一次，然后只检查其中的值

$("#container > div").on('mouseenter mouseleave', function(e) {
    var color = $("select[name=color]").val();

    if (color === "black-white") {
        $(this).removeClass("colored").toggleClass("black", e.type==='mouseenter');
    } else if (color === "colored") {
        $(this).removeClass("black").toggleClass("colored", e.type==='mouseenter');
    }
});

#container div { 
  height: 100px;
  width: 100px;
  position: relative;
  border: 1px solid #000;
  margin: 20px;
  color: red;
}

#container div.colored {
  background: green
}

#container div.black {
    background: black
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="color">
  <option value="black-white">black-white</option>
  <option value="colored">colored</option>
</select>

<div id="container">
  <div>Hover me</div>
</div>

addClass如果否则无法正常工作

1 个答案: