Javascript/jQuery：有没有更好的方法在 Javascript 中实现这一点？答案

【问题标题】：Javascript/jQuery: Is there a better way to acomplish this in Javascript?Javascript/jQuery：有没有更好的方法在 Javascript 中实现这一点？
【发布时间】：2013-06-17 15:05:22
【问题描述】：

我有这个代码：

$(document).ready(function() { //Document Ready

$(".examples .example1").click(function() {

    $(".examples .example1 div").fadeToggle("slow");
    $(".examples .example1").toggleClass('focused');

});


$(".examples .example2").click(function() {

    $(".examples .example2 div").fadeToggle("slow");
    $(".examples .example2").toggleClass('focused');

});


$(".examples .example3").click(function() {

    $(".examples .example3 div").fadeToggle("slow");
    $(".examples .example3").toggleClass('focused');


});

}); // End

这基本上只是在 3 个（下面的示例中只有 2 个）不同的地方复制了相同的东西元素 - 单击、切换 div 和切换类。

Working code here（丑陋，不像网站上出现的那样——缺少其他 css/less 和图像）

这很好用，但是我内心的（非常小的）JS 人说必须有一种更清洁的方式来做同样的事情？似乎过于重复和丑陋。

任何人都可以帮助编写更好的代码吗？（因此，如果我学习，我会成为更好的编码器）

【问题讨论】：

您的演示仅显示每个 examplesX 类的一个元素。每个有多个吗？
怎么样：jsfiddle.net/5anxN
为什么用 span 包装 div？
你的最后点击功能有错别字吗？
@epascarello 是的，但是因为我没有在 HTML 中添加第三个跨度，所以我没有注意到这个问题。 Tahnks 指出来。

标签： javascript jquery html repeat

【解决方案1】：

对所有元素使用一个公共类。您可以使用this 来引用被点击的元素。

$(".examples>span").click(function() {   
    $(this).toggleClass('focused').find("div").fadeToggle("slow");    
});

【讨论】：

我没有投反对票，但请看问题：$(".examples .example3") 对$(".examples .example2 div") 生效（而不是$(".examples .example3 div")）。
@bwoebi：我敢打赌这是创建代码示例时的复制错误。
@epascarello 我没有投反对票，但我添加了一个不同的类-“NOTOGGLE”当我点击它时它仍然会切换？
NOTOGGLE 是什么意思？你失去了我。请在主要问题下回答我关于错字的问题，以便为其他人解决您的问题。
@harley：您的标记无效，并且您的 p 元素之一在结束标记中缺少其 /。

【解决方案2】：

$(document).ready(function() { //Document Ready
   $('.examples > span[class^="example"]').click(function() {
      $(this).toggleClass('focused').children('div').fadeToggle('slow');
   });
}); // End

如果.examples 的类名以example 开头，这将针对跨度子级。它将在此元素上切换 focused 类，然后继续查找子 div 并缓慢切换它。

Codepen 链接：http://codepen.io/anon/pen/DBHFy

【讨论】：