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中完成。
（为了便于说明，此处的代码是我投资组合experience section上的代码片段，其中点击图标会显示有关它的信息面板，并隐藏任何以前显示的信息面板。）

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中添加一些公共类.info1,.info2来从js代码中删除info。例如

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

4 个答案: