面向对象的 jQuery 问题答案

【问题标题】：Object-Oriented jQuery Question面向对象的 jQuery 问题
【发布时间】：2009-11-12 18:22:46
【问题描述】：

$("#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 会很棒。不确定如何实施正确的面向对象方法。感谢您的阅读！

【问题讨论】：

面向对象可能不是您想要的。 jQuery 鼓励更实用的方法。

标签： javascript jquery jquery-selectors

【解决方案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 的“切换”。

【讨论】：

您的代码中有一个错误，因为显然 removeClass("show") 应该引用所有其他元素而不是 $(this)

【解决方案2】：

这样的事情可能会奏效：

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

表达式“id^='e'”选择所有 id 以 e 开头的元素。因此，如您所见，e1 不是一个很好的名称……而是采用更具描述性的名称。

但更厉害的是，如果 e 指的是多个元素，那你为什么不像这样写一个类名 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 更容易阅读和理解。

【讨论】：

我建议也使用$("#descriptions div.show").removeClass("show"); 而不是$("#descriptions div").removeClass("show");
$(this) 直接起作用，所以你不必调用选择器两次
开设课程确实是一种更好的方法。当我在选择器中看到字符串连接时，我会寻找一种更清晰地重组它的方法。

【解决方案3】：

您可以使用jQuery Regex Filter 并使用简单的正则表达式来绑定点击事件。虽然我会使用不同的 ID，这会使 Paul 的答案成为可能。

【讨论】：

【解决方案4】：

你可以定义你的函数到 jQuery 对象来处理这个。

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

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

【讨论】：