javascript - 面向对象的 jQuery 问题

Question

$("#e1").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e1d").addClass("show");
});

$("#e2").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e2d").addClass("show");
});


<div id="descriptions">

<div id="e1"></div>
<div id="e1d" class="description"></div>

<div id="e2"></div>
<div id="e2d" class="description"></div>

</div>

我正在尝试找出一种方法来不重复代码并让 jQuery 自动搜索并链接 div。因此，将每个名称为 e1~∞ 的 id 链接到 e1~∞d 就太好了。不确定如何实现正确的面向对象方法。感谢您的阅读!

Answer 1

给你的元素类，然后通过类名在 jQuery 中引用它们:

<div id="descriptions">

<div id="e1" class="trigger"></div>
<div id="e1d" class="description"></div>

<div id="e2" class="trigger"></div>
<div id="e2d" class="description"></div>

</div>


$(".trigger").click(function() {
      $('#descriptions>div').removeClass("show");
      $(this)
      .next("div.description")
      .addClass("show");
});

综上所述，看起来您想要显示/隐藏 div。您可能想研究一下 jQuery 的“切换”。