Question

在我的代码中，我必须使用不同的名称进行div，除了名称相同的最后部分（successMessage）。当下面的代码中出现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);
    };

Answer 1

$('#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_"]'));

Answer 2

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

Answer 3

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

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

Answer 4

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

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

通过合并功能避免DRY

4 个答案: