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

Question

我知道这非常简单，但我是新手，我只需要展示一次。 因此，当我使用jQuery / javascript时，我发现自己一次又一次地编写重复代码以使用相同的函数来定位不同的元素，例如：

$(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和icon4重复。 我正在选择一个不同的元素，显示另一个元素，隐藏另外三个元素，并在每个函数中添加不同的类，我不知道什么是不为每个元素重复整个事物的最佳方法。 我很高兴能够展示出重构这一点的任何想法，并且不介意看到如何在vanilla js中完成。
（为了说明，这里的代码是我的投资组合体验部分代码的片段，点击图标显示有关它的信息面板，并隐藏任何以前显示的信息面板。）

Answer 1

使用公共类，使用它，而不是从集合中删除它

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

Answer 2

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

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

或者为每个人分配他们共享的行为？ “.icon-btn”，你使用“.icon-btn”作为你希望拥有该行为的选择器。

Answer 3

我对你的实际HTML做了一些假设，但你可以在这种情况下利用siblings()方法。

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

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

});

Answer 4

如果您可以使用数据属性更好地规划您的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');

    });    

你也可以通过在html中添加一些常见的类作为info来从js代码中删除.info1,.info2 。 例如