当隐藏或显示其他div时，单击元素的jQuery切换类

Question

我使用下面的代码切换一些div，正在工作。

我希望删除单击元素的类“链接”，以及单击其他元素时删除它，并将其添加回前一个元素。被按下的主元素应该删除类，而所有其他元素都不应该删除。

$(this).toggleClass("link") ...

​

$('a').on('click', function() {
  var target = $(this).attr('rel');
  $("#" + target).toggle().siblings("div").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="cat-1" class="show">
  <div>
    <a class="link" rel="main-1" href="#">Main A</a>
  </div>
</div>

<div id="cat-2" class="show">
  <div>
    <a class="link" rel="main-2" href="#">Main B</a>
  </div>
</div>

<div id="cat-3" class="show">
  <div>
    <a class="link" rel="main-3" href="#">Main C</a>
  </div>
</div>

<div class="row">
  <div id="main-1" class="description" style="display:none;">
    <p>At vero eos et accusamus.</p>
  </div>

  <div id="main-2" class="description" style="display:none;">
    <p>et iusto odio dignissimos.</p>
  </div>

  <div id="main-3" class="description" style="display:none;">
    <p>At vero eos et accusamus et iusto odio dignissimos.</p>
  </div>
</div>

​

Answer 1

这将检查link类(.hasClass)并相应切换。

父div是通过查找以"cat-" ("div[id^='cat-'] > div > a")开头的id来找到的。

​

$('a').on('click', function() {

if ($(this).hasClass("link")) {
  $("div[id^='cat-'] > div > a").addClass("link");
  $(this).closest("div").find("a").removeClass("link");
} else {
  $("div[id^='cat-'] > div > a").addClass("link");
}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="cat-1" class="show">
  <div>
    <a class="link" rel="main-1" href="#">Main A</a>
  </div>
</div>

<div id="cat-2" class="show">
  <div>
    <a class="link" rel="main-2" href="#">Main B</a>
  </div>
</div>

<div id="cat-3" class="show">
  <div>
    <a class="link" rel="main-3" href="#">Main C</a>
  </div>
</div>

<div class="row">
  <div id="main-1" class="description" style="display:none;">
    <p>At vero eos et accusamus.</p>
  </div>

  <div id="main-2" class="description" style="display:none;">
    <p>et iusto odio dignissimos.</p>
  </div>

  <div id="main-3" class="description" style="display:none;">
    <p>At vero eos et accusamus et iusto odio dignissimos.</p>
  </div>
</div>

​