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的“切换”。

Answer 2

这样的事情可能有用：

$("id^='e'").click(function() {
    $("#descriptions div").removeClass("show");
    $("#" + $(this).attr("id") + "d").addClass("show");
});

表达式“id ^ ='e'”选择id以e开头的所有元素。所以你看到e1不是一个很好的名字......而是采取更具描述性的东西。

但是更强大，如果e指的是多个元素，你为什么不这样做一个类名呢？

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

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

jQuery更容易阅读和理解。

Answer 3

您可以使用jQuery Regex Filter并使用简单的正则表达式绑定click事件。虽然我会使用不同的ID来保证Paul的答案。

Answer 4

你可以为jQuery对象定义你的函数来处理它。

$.fn.toggleShow = function(){
     $("#descriptions div").removeClass("show");
     $("#" + $(this).attr('id') + "d").addClass("show");  
}

$("#e1").click(function(){
     $(this).toggleShow();
});

面向对象的jQuery问题

4 个答案: