Question

这就是我想要的。页面上有几个框。每个框都有子项，其中包含一些可点击的div和文本。当用户点击可点击的div时，应显示一条警告，说明该div已被点击。如果他们点击文本就不会发生任何事情。这是我变得棘手的地方。

当他们点击该框时，该框应该有一个名为open的类，当他们点击不是框的内容或框中的子项时，应删除类open 。如果他们点击了可以对该框类别没有影响的可点击div。

因此，如果用户点击另一个框，则第一个框仍应具有open类，新框也应具有open类，但如果他们点击标题或正文或任何内容除了方框之外，应删除open类。如果单击可点击的div，则会记住该触发器应触发相应的警报。

看起来这里有很多事件定位，我想知道你是否有一个好的解决方案。

仅出于演示目的，请将其设置为如果框中有open类，则将框的背景更改为绿色。如果他们点击其他东西，如标题或正文或其他div，框应该有钢蓝（原始颜色）。如果他们点击可点击的子div，则该框的背景应为绿色，并应触发警报。

以下是一些代码：

＆＃13;

$(document).on("click", function(e) {
  //is there somthing like:
  // if `this` is not the box or children of box remove the
  // class `open` from box. this way if they click on header or body I could remove 
  //the `open` class from box
  if (e.target == this) {
    $(".box").removeClass("open")
  } else if ($(e.target).hasClass("box")) {
    $(e.target).addClass("open")
  }
  if ($(e.target).hasClass("test1")) {
    alert("test1")
  }
  if ($(e.target).hasClass("test2")) {
    alert("test2 clicked")
  }
  if ($(".box").hasClass("open")) {
    $(this).css("background", "green")
  }
})

＆＃13;

.box {
  margin: 4em 5em;
  background: steelblue;
  width: 15em;
  height: 8em;
  padding: .1em;
}
.clicker {
  width: 5em;
  background: lightgreen;
  padding: .2em;
  cursor: pointer;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: tomato;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="header">header</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test2 clicker">Test click 2</p>
</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test clicker">Test click 2</p>
</div>

＆＃13;

感谢您的帮助

Answer 1

我认为只是调整条件应该像

那样

$(document).on("click", function(e) {
  //is there somthing like:
  // if `this` is not the box or children of box remove the
  // class `open` from box. this way if they click on header or body I could remove 
  //the `open` class from box

  var $target = $(e.target);

  var $clicker = $target.closest('.clicker');
  if ($clicker.length) {
    if ($clicker.hasClass("test")) {
      $('#clicked').html("test")
    } else if ($clicker.hasClass("test1")) {
      $('#clicked').html("test1")
    } else if ($clicker.hasClass("test2")) {
      $('#clicked').html("test2")
    }
  }

  var $box = $target.closest('.box');
  if ($box.length) {
    $box.addClass('open');
  } else {
    $('.box.open').removeClass('open');
  }
})

.box {
  margin: 4em 5em;
  background: steelblue;
  width: 15em;
  height: 8em;
  padding: .1em;
}
.box.open {
  background-color: lightgrey;
}
.clicker {
  width: 5em;
  background: lightgreen;
  padding: .2em;
  cursor: pointer;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">header:
  <div id="clicked"></div>
</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test2 clicker">Test click 2</p>
</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test clicker">Test click 2</p>
</div>

将事件处理程序附加到子项，父项和文档

1 个答案: