面向对象的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.因此,将每个id与名称e1~∞链接到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的"切换".