Question

我有2个加载器图像，元素ID为loader1和loader2。我用第一个绑定：

$('#loader1')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

如何在不重复整个事情的情况下将相同的代码绑定到loader2？

Answer 1

$('#loader1, #loader2')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

请参阅jQuery Multiple Selector文档。

Answer 2

这可以帮到你：

$('div[id^=loader]')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })

我使用了div，但你可以使用每个html标签：p，span，b等。

你必须使用^ =选择器，其中^ =表示开头。可以在此处找到更多信息：http://api.jquery.com/attribute-starts-with-selector/。此处列出了所有选择器：http://api.jquery.com/category/selectors/

Answer 3

一般来说，正确这样做的方法是为两个元素提供相同的类名...如果你需要处理超过2或3个，这也会更容易元件。

<img src="image1.png" class="loader" id="loader1" />
<img src="image2.png" class="loader" id="loader2" />
<img src="image3.png" class="loader" id="completelyDifferentId" />

然后你可以通过这种方式轻松访问它们

$('.loader').hide().ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

Answer 4

您可以使用attribute starts with selector（^=）：

$("[id^=loader]")
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

如果您还可以包含标记名称，这对许多浏览器都有帮助，因为jQuery的选择器引擎可以在查看id值之前使用标记名称缩小候选列表的范围。例如，如果两者都是img元素，那么：

$("img[id^=loader]")
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

如何编写一个jQuery选择器来匹配其id以相同字符串开头的两个元素

4 个答案: