0

我有这个代码：

$(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 和切换一个类。

这里的工作代码（丑陋而不是它出现在站点中 - 缺少其他 css/less 和图像）

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

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

4

2 回答 2

3

在所有元素上使用一个公共类。然后，您可以使用this来引用被单击的元素。

$(".examples>span").click(function() {   
    $(this).toggleClass('focused').find("div").fadeToggle("slow");    
});
于 2013-06-17T15:09:54.840 回答
1 
$(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

于 2013-06-17T15:12:25.997 回答