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重構，如何避免重複代碼？

回答

相關問題