通過合併功能避免DRY

在我的代碼中，我必須使用不同名稱的div，除了最後一部分名稱是相同的（successMessage）。當下面的代碼中出現div時，執行1秒後刪除div。通過合併功能避免DRY

當然，這是DRY的一個很好的例子，因爲除了divs的名稱，其功能是相同的。那麼，將這些函數合併到影響這兩個div的最簡單方法是什麼？

在此先感謝！

if ($('#MainContent_MovieEdit_MovieGenreEdit1_successMessage').length > 0) { 
     setTimeout(function() { 
      $('#MainContent_MovieEdit_MovieGenreEdit1_successMessage').fadeOut('slow'); 
     }, 1000); 
    }; 

    if ($('#MainContent_MovieEdit_successMessage').length > 0) { 
     setTimeout(function() { 
      $('#MainContent_MovieEdit_successMessage').fadeOut('slow'); 
     }, 1000); 
    };

來源

2012-03-15 holyredbeard

爲什麼不添加一個'successMessage'類，並選擇與替代？ – Bojangles 2012-03-15 14:02:40

$('#MainContent_MovieEdit_successMessage, #MainContent_MovieEdit_MovieGenreEdit1_successMessage') 
.delay(1000).fadeOut('slow');

沒有必要爲if聲明，如果jQuery的找不到的元素，什麼都不會發生。 multiple selector^[docs]將選擇這兩個元素，.delay()^[docs]提供了一個很好的方式來推遲執行fadeOut。

另一種可能的選擇將是attribute starts with selector^[docs]：

$('div[id^="MainContent_MovieEdit_"]')

假設元件是div元件。當然，你也可以在一個函數把這個包，如果你真的想：

function fadeOut($elements) { 
    $elements.delay(1000).fadeOut('slow'); 
} 

fadeOut($('div[id^="MainContent_MovieEdit_"]'));

來源

2012-03-15 14:02:04

太好了，非常感謝。不知道if語句沒有必要。你每天學習新的東西：） – holyredbeard 2012-03-15 14:10:39

function setFade(divId) { 
    var element = $('#' + divId); 
    if (element.length > 0) { 
     setTimeout(function() { 
      element.fadeOut('slow'); 
     }, 1000); 
    }; 
}

提取物的方法

或者，也許更好，但使用的HTML類。

var elements = $('.to-fade'); 
if (elements.length > 0) { 
    setTimeout(function() { 
     elements.fadeOut('slow'); 
    }, 1000); 
};

來源

2012-03-15 14:01:51 Joe

你可能應該將jquery對象緩存在函數的開頭的'var'中作爲DRYer;） – JaredMcAteer 2012-03-15 14:02:35

@OriginalSyn，謝謝。好點子。 – Joe 2012-03-15 14:03:57

你可以使用屬性與選擇開始

if ($('div[id^=MainContent_MovieEdit]').length > 0) { 
    var that = this; 
    setTimeout(function() { 
     $(that).fadeOut('slow'); 
    }, 1000); 
};

來源

2012-03-15 14:03:20

最佳做法是，你也只能找到你的DOM元素一次：所以不是查詢DOM兩次，你可以做到以下幾點：

var $successMessage = $('#MainContent_MovieEdit_MovieGenreEdit1_successMessage'); 
if ($successMessage.length > 0) { 
    // etc. 
    $successMessage.fadeOut(); 
}

來源

2012-03-15 14:13:52 NickGreen

通過合併功能避免DRY

回答

相關問題