使无休止的jQuery简短而简单

Make an endless jQuery short and easy

本文关键字：简单 jQuery 无休止      更新时间：2023-09-26

我的WordPress网站上有一个手风琴。

通常它工作正常，在单击不同的选项卡时添加和删除类，但是网站上的一个手风琴存在问题：单击其中一个选项卡时 - 它不会关闭其余打开的选项卡。所以我添加了这段代码，它工作正常：

jQuery(document).ready(function($) {
  $("#top11").click(function() {
    $("#collapse202").removeClass("in");
    $("#collapse203").removeClass("in");
  });
  $("#top12").click(function() {
    $("#collapse201").removeClass("in");
    $("#collapse203").removeClass("in");
  });
  $("#top13").click(function() {
    $("#collapse201").removeClass("in");
    $("#collapse202").removeClass("in");
  });
});

我相信有一种方法可以缩短它，有人可以解释一下如何让它更紧凑吗？

一种方法是向每个折叠的元素添加data-id。例如：

<div id="collapse201" data-id="top11"></div>
<div id="collapse202" data-id="top12"></div>
<div id="collapse203" data-id="top13"></div>

当然，您应该在选项卡中使用一个类，以防手风琴中有很多选项卡：

<div id="top11" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>

JS代码可能看起来像这样：

jQuery(document).ready(function($) {
  $(".clickingTab").click(function() {
    var clickedId = $(this).attr("id");
    $("element:not([data-id="+clickedId+"])").removeClass("in");
  });
});

当然，可能有更有效的方法来解决您的问题。但对于这个特定问题，这可能是特定的解决方案。

如果您的 HTML 看起来像这样，您可以使用 next() 函数来定位下一个同级元素：

$("#top11, #top12, #top13").click(function() {
	$("#top11, #top12, #top13").next().removeClass("in");
	$(this).next().addClass("in");
});
.in {
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top11">top11</div>
<div id="collapse201" class="in">collapse201</div>
<div id="top12">top12</div>
<div id="collapse202" class="in">collapse202</div>
<div id="top13">top13</div>
<div id="collapse203" class="in">collapse203</div>

相关文章：