1

我在 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");
                }
            });
        });
4

2 回答 2

2

使用类选择器并将源对象作为上下文传递给您不需要在此处使用的选择器。

$('.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");
});
于 2013-03-12T06:45:12.233 回答
1

Jquery 提供了多种选择器来遍历子元素。这是可以解决您的问题的示例代码：

$('.productItem').bind('click', function(e) {
    $(this).children('.productName').css('background', "url(../img/SmallGreenCheck.png) no-repeat");
});
于 2013-03-12T06:54:05.630 回答