Question

我刚开始使用jQuery.each()，并想知道为什么这不起作用（jsfiddle）：

$('span.cleanup').on('click', function() {
    $('table tr td p span:contains("0")').each(function (i) {
        $(this).css("background-image", "url('assets/clean.png')");
    });
});

注意：$('table tr td p span:contains("0")').css("background-image", "url('assets/masteries/gray_mastery0.png')");似乎也不起作用。

任何人都可以在为多个匹配对象设置内容时解释.each()的工作原理吗？

Answer 1

首先，这不是因为你使用了错误的选择器，只是因为你的图像远远大于跨度的宽度/高度..

imageUrl = 'https://www.google.co.uk/images/srpr/logo11w.png'
$('document').ready(function() {
    $('span.cleanup').on('click', function() {
        $('table tr td p span:contains("0")').css("background-image", "url("+imageUrl+")");
    });
    /* uncomment this event and comment the above event to see the loaded image
    $('span.cleanup').on('click', function() {
        $('table tr td').css("background-image", "url("+imageUrl+")");
    });
    */
    $('span.cleanup').hover(function() {
        $('table tr td p span:contains("0")').css("background-color", "red");
    }, function(){
        $('table tr td p span:contains("0")').css("background-color", "white");
    });
});

您可以查看我的Fiddle，如果您对第一次点击事件发表评论并取消注释第二次点击事件，则会看到它加载图片。其次，如果我可以通过尝试更改background-color函数上的hover来说你使用正确的选择器..

注意：如果需要，可以使用CSS background-size属性缩小图像。

Answer 2

你的jquery将是

$('document').ready(function() {   
$('span.cleanup').on('click', function() {   
        $('table.masteries').find('span:contains("0")').css("background", "red");
    });
});

DEMO

Answer 3

您的代码很好，但您的小提琴设置不正确。即使点击事件已经触发，您也不会注意到背景图像，因为左上角是白色的。

这非常有效：

http://jsfiddle.net/chrissp26/8b6m5jf1/7/

$('span.cleanup').on('click', function() {

    $('table tr td p span:contains("0")').css("background-image", "url(http://critterbabies.com/wp-content/gallery/kittens/cute-kitten-playing.jpg)");

});

使用jQuery.each（）和：contains（）设置背景图像

3 个答案: