通过合并功能避免DRY

在我的代码中，除了名称的最后一部分相同（successMessage）外，我必须使用不同的名称进行div。当div出现在下面的代码中时，将在1秒后删除div。

当然，这是DRY的一个很好的例子，因为除了div的名称之外，函数是相同的。那么，将这些函数合并为影响两个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);
    };

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

不需要if语句，如果jQuery找不到元素，则不会发生任何事情。多重选择器^[docs]将同时选择两个元素，而.delay()_[docs]提供了一种推迟执行fadeOut的好方法。

另一个可能的选择器是以选择器^[docs]:开头的属性

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

假设这些元素是CCD_ 4元素。当然，如果你真的想的话，你也可以把它封装在一个函数中：

function fadeOut($elements) {
    $elements.delay(1000).fadeOut('slow');
}
fadeOut($('div[id^="MainContent_MovieEdit_"]'));

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);
};

您可以使用选择器的属性启动

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

作为最佳实践，您还应该只找到一次dom元素：因此，您可以执行以下操作，而不是查询dom两次：

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

相关内容

最新更新

热门标签：