jQuery重构，如何避免重复代码？

我知道这非常简单，但我是新来的，我只需要显示一次。所以，当我使用jQuery/JavaScript的，我发现自己一次又一次写重复的代码到目标具有相同功能的不同元素，例如：jQuery重构，如何避免重复代码？

$(function() { 
    $('.icon1').click(function() { 
     $('.info1').toggle().addClass('animated fadeInDown'); 
     $('.info2, .info3, .info4').hide(); 
    });       
}); 
$(function() { 
    $('.icon2').click(function() { 
     $('.info2').toggle().addClass('animated fadeInLeft'); 
     $('.info1, .info3, .info4').hide(); 
    });      
});

，这再次重复了ICON3和图标4。我正在选择另一个元素，显示另一个元素，隐藏另外三个元素，并在每个函数中添加不同的类，我不知道什么是不重复每个元素的整个事情的最佳方式。我很乐意看到任何想法来重构这一点，并且不会介意看到这是如何在香草js中完成的。
（为了说明这里的代码是从我的投资组合，其中点击图标显示关于它的信息面板的experience section的代码片段，并隐藏任何先前显示信息面板。）

来源

2017-09-05 Syknapse

这将是更好，如果你可以计划你的HTML更好地与数据属性为如：

<div class="icon" data-info = "1"> <div> 
<div class="icon" data-info = "2"> <div> 

<div class="info-1 info"> <div> 
<div class="info-2 info"> <div> 
    $('.icon').click(function() { 
    var className = '.info-' + $(this).data('info'); 
     $('.info').hide(); 
     $(className).toggle().addClass('animated fadeInDown'); 

    });

你可以从JS代码加在html中一些常见的类如info还去除.info1,.info2他们。例如

来源

2017-09-05 18:28:50

哇！这是一个了不起的见解。这个问题唯一的问题是，infopanels没有切换显示/隐藏。但是我添加了@espascarello的想法'not（）'，它的功能就像一个魅力：'$（'。icon'）。click（function（）{var infoPanel ='.info-'+ $（this）。 data（'info'）; $（'。info'）。not（infoPanel）.hide（）; $（infoPanel）.toggle（）; }）;' [这里是工作示例链接]（https ：//codepen.io/Syknapse/pen/dzEOmz） – Syknapse

现在我想知道，如果我想要把这个不同的类添加到不同的图标，而不是所有的fadeInDown，有没有一种优雅的方式，我可以去做这个没有重复相同的代码块？ – Syknapse

if（$（this）.data（'info'）=== 1 || $（this）.data（'info'）='我有回答我自己的问题通过尝试一个if语句，它工作正常 ' == 4）{ $（infoPanel）.addClass（'test'）; } else { $（infoPanel）.addClass（'test2'）;我现在的问题是，如果我想为每个图标添加一个不同的类，是否只添加'else if'statements或者是否有更简洁的方法？ – Syknapse

您应该能够用逗号分隔这些选择器。

$('.icon1,.icon2').click(function()

或者分配每个他们共享该行为的单个类？ “.icon-btn”，你可以使用“.icon-btn”作为任何你想要的行为的选择器。

来源

2017-09-05 18:10:34

当每个图标触发不同的信息面板并隐藏另一个3时，我该如何做到这一点？ – Syknapse

如果您可以在任何可点击的图标上分配data-index =“index”属性，它可能会更干净，然后在图标上单击抓取该索引值并从那里对DOM进行修改。使用共享行为的共同类，你可以帮助你，然后只需要隐藏所有的普通类，然后show（）被点击的元素。另一种方法可能是使用.each（）迭代器以特定数字结尾的类来找出.show（）和.hide（）的“ends with”选择器$（名称$ =“value”）？祝你好运！ –

非常感谢。 – Syknapse

使用一个通用类，用这个，而不是从集合

$(function() { 
    $('.commonClass').click(function() { 
     $(this).toggle().addClass('animated fadeInDown'); 
     $('.commonClass').not(this).hide(); 
    });       
});

来源

2017-09-05 18:19:30 epascarello

这看起来不错，我会试试 – Syknapse

后续问题，如果我还在改变我添加的课程，我是否必须为每个课程重新编写整个课程？因此，在我的示例中，icon1显示淡入淡出的信息1，而icon2显示淡入淡出的信息2。 – Syknapse

我为图标和信息创建了一个公共类，并试图按照您的示例进行操作。但它不起作用。 $（'。icon'）。click（function）（）。{'。info'）。toggle（）; $（'。info'）。not（this）.hide （）; }）; }）; 这只是永久保持所有信息面板隐藏。如果我选择info1，info2，那么我又回到原点了，因为每个图标都会切换不同的信息面板。 – Syknapse

我做你的实际的HTML一些假设删除它，但你很可能利用其在这种情况下，siblings()方法。

$(document).on('click', '.icon', function() { 

    $(this).toggle().addClass('animated fadeIn') 
     .siblings().hide(); 

});

来源

2017-09-05 18:23:14 JDewitt

jQuery重构，如何避免重复代码？

回答

相关问题