是否可以使用jQuery为每个<div>选择一个单独的列表项

Question

我有两个div，每个div包含五个列表项。这个想法是每个div标题都是一个问题，用户可以为每个标题选择合适的答案。

该代码段显示了我当前的代码。您会注意到，您只能在两个div之间选择一个列表项。我希望用户为每个div选择一个答案，并使该答案保持突出显示。

这可能吗？

非常感谢提前。

$(function() {
  $('.ans').click(function(evt) {
    evt.stopPropagation();
    $('.questionlist1').children().not(this).removeClass('chosenanswer');
    $(this).toggleClass("chosenanswer");
  });
});

.question1 {
  max-width: 1000px;
  background-color: #424242;
  margin: 0 auto;
  color: #fff;
  overflow: auto;
  padding: 0;
  -webkit-box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
  box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
}

.questiontitle {
  background-color: #212121;
  padding: 1.5%;
}

.questionlist1 {
  padding: 0;
  margin: 0;
  list-style: none;
}

.questionlist1 li {
  display: inline-block;
  background-color: #616161;
  width: 16.2%;
  padding: 5px;
  margin: 1.8% 0 1.8% 1.5%;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.questionlist1 li:nth-child(5n) {
  margin-right: 1.5%;
}

.questionlist1 li:hover,
li.chosenanswer {
  background-color: #FFCA28;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question1">
  <div class="questiontitle">This is the first div</div>
  <ul class="questionlist1">
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
  </ul>
</div>
<br>
<div class="question1">
  <div class="questiontitle">This is the second div</div>
  <ul class="questionlist1">
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
  </ul>
</div>

Answer 1

使用

$(".questionlist1").children().not(this).removeClass('chosenanswer');

...您正在获取所有 .questionlist1元素，然后所有他们的孩子，这要归功于jQuery基于集合的特性。

您只需要点击的anwer所在的.questionlist1，您可以从closest获取：

$(this).closest(".questionlist1").children().not(this).removeClass('chosenanswer');

$(function() {
  $('.ans').click(function(evt) {
    evt.stopPropagation();
    $(this).closest(".questionlist1").children().not(this).removeClass('chosenanswer');
    $(this).toggleClass("chosenanswer");
  });
});

.question1 {
  max-width: 1000px;
  background-color: #424242;
  margin: 0 auto;
  color: #fff;
  overflow: auto;
  padding: 0;
  -webkit-box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
  box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
}

.questiontitle {
  background-color: #212121;
  padding: 1.5%;
}

.questionlist1 {
  padding: 0;
  margin: 0;
  list-style: none;
}

.questionlist1 li {
  display: inline-block;
  background-color: #616161;
  width: 16.2%;
  padding: 5px;
  margin: 1.8% 0 1.8% 1.5%;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.questionlist1 li:nth-child(5n) {
  margin-right: 1.5%;
}

.questionlist1 li:hover,
li.chosenanswer {
  background-color: #FFCA28;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question1">
  <div class="questiontitle">This is the first div</div>
  <ul class="questionlist1">
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
  </ul>
</div>
<br>
<div class="question1">
  <div class="questiontitle">This is the second div</div>
  <ul class="questionlist1">
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
  </ul>
</div>

或者，由于答案是兄弟姐妹，您可以使用siblings更简单地完成：

$(this).siblings().removeClass('chosenanswer');

$(function() {
  $('.ans').click(function(evt) {
    evt.stopPropagation();
    $(this).siblings().removeClass('chosenanswer');
    $(this).toggleClass("chosenanswer");
  });
});

.question1 {
  max-width: 1000px;
  background-color: #424242;
  margin: 0 auto;
  color: #fff;
  overflow: auto;
  padding: 0;
  -webkit-box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
  box-shadow: -2px 5px 9px -1px rgba(0, 0, 0, 0.24);
}

.questiontitle {
  background-color: #212121;
  padding: 1.5%;
}

.questionlist1 {
  padding: 0;
  margin: 0;
  list-style: none;
}

.questionlist1 li {
  display: inline-block;
  background-color: #616161;
  width: 16.2%;
  padding: 5px;
  margin: 1.8% 0 1.8% 1.5%;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.questionlist1 li:nth-child(5n) {
  margin-right: 1.5%;
}

.questionlist1 li:hover,
li.chosenanswer {
  background-color: #FFCA28;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question1">
  <div class="questiontitle">This is the first div</div>
  <ul class="questionlist1">
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
  </ul>
</div>
<br>
<div class="question1">
  <div class="questiontitle">This is the second div</div>
  <ul class="questionlist1">
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
    <li class="ans">Item 1</li>
  </ul>
</div>