通过合并功能避免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

回答

相关问题