Question

var buttons = document.querySelectorAll("button");

$(".list").on("click", "button", function() {
  $(this).toggleClass("select");
  $(this).siblings(".add").toggleClass("exclude");
});

.select {
  background: purple;
  color: white;
}

.list {
  height: 200px;
}

.exclude {
  background: grey;
  color: grey;
  text-decoration: line-through;
}

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div><input type="text" placeholder="Add New Events"></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Eat</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Workout</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Sleep</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Laundry</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Study</button></div>
</div>

我想做的是，我要使每个按钮都能够将一个类列表切换到自身，并在单击该按钮时将另一个类列表切换到其他按钮。因此，我试图使用同级选择器来选择其他按钮，但是它不起作用。有人可以告诉我原因并帮助我解决吗？

Answer 1

<button>不是彼此的直接同级。它们每个都包裹在<div>中。因此，您需要的代码将类似于

$(this).parent().siblings().children(".add").toggleClass("exclude");

jQuery Siblings Selector在按钮上不起作用

1 个答案: