Question

我有三张图片，其中只有一张可以选择状态。其中任何一个都会动态添加一个类。如果该类存在，我必须更改该图像的src。这是我的代码到目前为止，它有一些jQuery的问题。

<div class="estart">            
    <div class="on-off-1">
        <img class="" src="img/on1.png" alt="">                        
    </div>

    <div class="on-off-2">
        <img class="dynamic-added-class" src="img/on2.png" alt="">                        
    </div>           

    <div class="on-off-3">
        <img class="" src="img/on3.png" alt="">                        
    </div>             
</div>

$("document").ready(function() {
    $(".estart div img").ready(function() {
        if ($('.estart div img').hasClass('dynamic-added-class')){
          this.src = this.src.replace("on", "off"); 
        }
    });
});

关闭图像为off1，off2 ......

Answer 1

.ready（）方法只能在与当前文档匹配的jQuery对象上调用。

因此，请勿使用$(".estart div img").ready(function() {。

您可以使用下面的each：

$(document).ready(function() {//use document not 'document'
    $(".estart div img").each(function() {
        if ($(this).hasClass('is-selected')){
          this.src = this.src.replace("on", "off"); 
        }
    });
});

Answer 2

最好使用图像作为背景而不是图像，然后您可以切换元素的类，然后更新背景。产生预期的效果。

Answer 3

另一种简单的方法是

$("document").ready(function() {
    var obj=$("img.dynamic-added-class");
     if(obj.length){ //check if there is any image with given class
        var src= obj.attr("src").replace("on", "off");
        obj.attr("src",src)
      }
});

演示： Fiddle

为什么在你可以直接检查时迭代并找到元素

根据类改变图像src

3 个答案: