Question

我在Jquery中很新，并且在更改每个函数中元素的背景时遇到问题。

我的Html代码如下：

<div id="productsBox"><span id="productItem2181" class="productItem"> <img class="ProductImage" src="/media/1656/FootballShirts.png "></img> <span class="productName">
      Football Shirts
    </span> <span class="relavantSizeAdvice">
      2189
    </span> </span> <span id="productItem2199" class="productItem"> <img class="ProductImage" src="/media/1697/FootballShorts.png "></img> <span class="productName">
      Football Shorts
    </span> <span class="relavantSizeAdvice">
      2189
    </span> </span> </div>

我想在点击时更改名为'productName'的类的背景图像。我的Jquery函数如下：

$('.productItem').bind('click', function () {
            var $tmp = $(this.innerHTML).each(function () {

            var className = $(this).attr('class') ;
            if (className == "productName") {

                    $(this).css("background", "url(../img/SmallGreenCheck.png) no-repeat");
                }
            });
        });

Answer 1

使用class selector并将源对象作为context with selector传递，此处不需要使用每个源对象。

$('.productItem').bind('click', function () {
    $(".productName", this).css("background", "url(../img/SmallGreenCheck.png) no-repeat");
});

Bind已被弃用，您将使用on代替。

$('.productItem').on('click', function () {
    $(".productName", this).css("background", "url(../img/SmallGreenCheck.png) no-repeat");
});

如果您创建了动态元素，则可以将事件委派给选择器或文档的父级。

$('parentselector').on('click', '.productItem', function () {
    $(".productName", this).css("background", "url(../img/SmallGreenCheck.png) no-repeat");
});

Answer 2

Jquery提供了各种用于迭代子元素的选择器。以下是可以解决问题的示例代码：

$('.productItem').bind('click', function(e) {
    $(this).children('.productName').css('background', "url(../img/SmallGreenCheck.png) no-repeat");
});

无法更改Jquery中每个函数中元素的背景图像

2 个答案: