jquery - addClass if else 不能正常工作

标签 jquery css

所以基本上,我希望它根据我的选择更改类。当我第一次更改它时,它会将类从 black 更改为 colored,但是当我将其更改回来时,它会保持 black >有色

有人可以解释为什么会发生这种情况吗,因为我在更改时删除了所有类,然后再次调用 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();
});

最佳答案

您不能在事件处理程序中绑定(bind)事件处理程序,并期望它发生变化,两个事件处理程序,以及可能在您更改选择时更多的事件处理程序,都将绑定(bind)到元素,它们不会消失。

你必须绑定(bind)处理程序一次,然后检查其中的值

$("#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>

关于jquery - addClass if else 不能正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38923826/

相关文章:

javascript - 按下切换按钮会影响 jQuery 中 div 的位置

jquery - 两个 div 并排 : how can i make the div that is on the left side go down when it breaks for responsive layout?

php - jQuery Ajax = 成功返回页面

javascript - 如何通过 HTML 下拉或选择元素实现自动完成功能?

php - 一次上传多张图片jquery

javascript - 如何在有序列表中定位数组的特定部分

html - 列表问题 - 内容垂直对齐但列表水平对齐?

python - 使用 xhtml2pdf pisa.CreatePDF() 创建 pdf 时出现 CSS 解析错误

javascript - Onclick 更改按钮的名称和功能

javascript - 看起来像 Google Docs 的 jQuery 文本过滤器框