javascript - 如何将具有“abcd+n”类的多个 div 的类添加到具有“qwer+n”类的另一个 div

Question

如何将具有“abcd+n”类的多个 div 的类添加到具有“qwer+n”类的另一个 div，例如：

<div class="firstlist">
    <a class="firstlistitem-1" ref="#">link1</a>
    <a class="firstlistitem-2" ref="#">link2</a>
    <a class="firstlistitem-3" ref="#">link3</a>
.........
</div>
and
<div class="secondlist">
    <div class="secondlistitem-1">
        <div class="incorrect">incorrect answer</div>
        <div class="ad_link">CLICK</div>
    </div>
    <div class="secondlistitem-2">
        <div class="incorrect">incorrect answer</div>
        <div class="ad_link">CLICK</div>
     </div>
    <div class="secondlistitem-3">
        <div class="correct">correct answer</div>
        <div class="ad_link">CLICK</div>
     </div>
.........
</div>

在“secondlistitem-2”中单击“CLICK”时，添加“firstlistitem-2”类“不正确”或“正确”

标签： javascriptjquery

Answer 1

您可以通过查看单击的链接是否与class .correct. 如果不是，则该类必须是incorrect. 然后，您可以使用.index链接父级的第二个列表中的 来指示要突出显示第一个列表中的哪些元素：

$('.ad_link').on('click', function() {
  let cc = $(this).siblings('.correct').length ? 'correct' : 'incorrect';
  let index = $(this).parent().index();
  $('.firstlist').children().eq(index).addClass(cc);
});

.correct { color : green; }
.incorrect { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
  <a class="firstlistitem-1" ref="#">link1</a>
  <a class="firstlistitem-2" ref="#">link2</a>
  <a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
  <div class="secondlistitem-1">
    <div class="incorrect">incorrect answer</div>
    <div class="ad_link">CLICK</div>
  </div>
  <div class="secondlistitem-2">
    <div class="incorrect">incorrect answer</div>
    <div class="ad_link">CLICK</div>
  </div>
  <div class="secondlistitem-3">
    <div class="correct">correct answer</div>
    <div class="ad_link">CLICK</div>
  </div>
</div>