Question

我想要做的是在div中添加/删除一些类。我做了fiddle ...... 我是js / jquery的新手，我不能理解为什么

 if ($('.div1').hasClass('active')){
    $('.div1').removeClass('active');

}

添加第二个功能后停止工作。他们是相互冲突还是其他什么？如果有，有什么方法可以解决它吗？我的目标是在点击链接或div之外的某个地方时删除.active。

Answer 1

基本上，您的mouseup事件处理程序和切换类功能是冲突的。一个删除.active类，另一个删除它。

您可以向现有mouseup处理程序添加额外的检查，以便省略.mylink1点击次数，如：

if (!e.target.classList.contains("mylink1") && !container.is(e.target) && container.has(e.target).length === 0) { ... }

检查updated fiddle。

参考代码：

$('.mylink1').click(function() {
  if ($('.div1').hasClass('active')) {
    $('.div1').removeClass('active');
  } else {
    $('.div1').addClass('active');
  }
});

$(document).mouseup(function(e) {
  var container = $(".div1");
  if (!container.is(e.target) && container.has(e.target).length === 0 && !e.target.classList.contains("mylink1")) {
    $('.div1').removeClass('active');
  }
});

body {
  background: black;
}

.div1 {
  width: 100%;
  height: 0;
  background: yellow;
  text-align: center;
}

.active {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="mylink1">
  Click Me
</a>

<div class="div1">
  <h1>need help :C</h1>
</div>

Answer 2

或许，您想要的是在点击“clickme”链接时切换“活动”类。此外，如果已添加“活动”类，则要在文档的任何位置单击时删除该类。为此，

1）为什么您的代码不起作用

您正在使用两个事件，mouseup和click：只要在同一元素与这两个事件绑定时，就会在点击之前触发mouseup。在你的情况下，同样的事情发生了。

单击“myLink”时，实际上还会触发文档的鼠标悬停。此mouseup事件删除“活动”类，单击事件添加“活动”类。这就是为什么每当你点击'myLink'时，总会添加活动类，你总是会看到黄色背景。

2）解决方案：尝试在“myLink”的点击处理程序中使用click而不是mouseup进行文档事件绑定和event.stopPropagation。

小提琴：https://jsfiddle.net/tgowvehx/5/

代码：

$('.mylink1').click(function(evt){
    evt.stopPropagation();
    if ($('.div1').hasClass('active')){
        $('.div1').removeClass('active');

    } else {
        $('.div1').addClass('active');
    }

});

$(document).click(function (e)
{

var container = $(".div1");


if (!container.is(e.target)
    && container.has(e.target).length === 0)
{
    $('.div1').removeClass('active');
}
});

Jquery / JavaScript函数冲突？

2 个答案: