Javascript 面向对象jQuery问题 $（“#e1”）。单击（函数（）{ $（#descriptions div”）.removeClass（“show”）； $（“e1d”）.addClass（“show”）； }); $（“#e2”）。单击（函数（）{ $（#descriptions div”）.removeClass（“show”）； $（#e2d”）.addClass（“show”）； });

我试图找到一种不重复代码的方法，让jQuery自动搜索并链接div。因此，将每个id与名称e1链接将非常棒~∞ 到e1~∞D不确定如何实现正确的面向对象方法。谢谢你的阅读

类似的方法可能会奏效：

$("#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>

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

但更重要的是，如果e指多个元素，为什么不这样命名一个类名e呢

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

jQuery更易于阅读和理解。

您可以使用简单的正则表达式绑定click事件。

---

尽管我会使用不同的ID，这将使Paul的答案成为可能。

您可以为jQuery对象定义函数来处理这个问题

<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中引用它们：

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

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

$（“.trigger”）。单击（函数（）{
$（'#descriptions>div'）。removeClass（“show”）；
$（本）
.下一步（“部门说明”）
.addClass（“show”）；
});

---

综上所述，看起来您想要显示/隐藏div。您可能需要查看jQuery的“切换”来实现这一点

面向对象可能不是您想要的。jQuery鼓励使用更功能化的方法。我建议也使用

$（“#descriptions div.show”）.removeClass（“show”）而不是
$（“#descriptions div”）。removeClass（“show”）$（此选项）直接起作用，因此您不必调用选择器twiceMaking a class确实是一种更好的方法。当我在选择器中看到字符串连接时，我会寻找一种更清晰地重新构造它的方法。代码中有一个错误，因为removeClass（“show”）显然应该引用所有其他元素，而不是$（此）
<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");
});