Question

我想使用HTML

更改jQuery中的所有图片来源

我有以下div：

<div id="image_list">

    <a href="images/Image1.jpg" title="Image 1">
        <img class="img" src="images/Image1.jpg" alt="Image 1">
    </a>

    <a href="images/Image2.gif" title="Image 2">
        <img class="img" src="images/Image2.gif" alt="Image 2">
    </a>
    <a href="images/Image3.gif" title="Image 3">
        <img class="img" src="images/Image3.gif" alt="Image 3">
    </a>

    <a href="images/Image4.gif" title="Image 4">
        <img class="img" src="images/Image4.gif" alt="Image 4">
    </a>

    <a href="images/Image5.gif" title="Image 5">
        <img class="img" src="images/Image5.gif" alt="Image 5">
    </a>

</div>

我有这个jQuery函数来在文档加载后2秒内更改div中的所有图像：

setTimeout(function () {
    for (var i = 0; i < links.length; i++) {
        alert("DFDF");
        $(this).find("img").attr('src', 'images/back.jpg');

    }

}, 2000);

links是a代码links = $listNode.find('a'),

的数组

且$listNode为$listNode = $('#image_list')

该功能提醒DFDF不要更改图像源。

我的代码中存在什么问题。

谢谢。

Answer 1

for没有设置this，因此$(this)引用全局window对象，而不是迭代的当前元素。使用.each：

links.each(function() {
    alert("DFDF");
    $(this).find("img").attr('src', 'images/back.jpg');
});

但是你根本不需要迭代，因为jQuery修饰符函数将对集合进行操作：

links.find("img").attr('src', 'images/back.jpg');

Answer 2

你不需要迭代每个元素，jquery会为你做这个：

setTimeout(function () {
        $('#image_list img').attr('src', 'images/back.jpg');
}, 2000);

顺便说一句，我怀疑this表示您认为在上面的代码中意味着什么。

Answer 3

使用IIFE（立即调用的函数表达式）如下所示，在页面加载后每2秒更改一次图像的src：

$(function() {
    $('#image_list .img').each(function(i,img) {
        var tm = i * 2000;
        (function( time, image ) {
            setTimeout(function() {
                $(image).attr('src', 'images/back.jpg');
            }, time );
        })( tm, img );
    });
});

＆＃13;

$(function() {
    var imgsrc = 'http://aspnethosting2go.com/wp-content/uploads/2014/07/feature1.png';
    $('#image_list .img').each(function(i,img) {
        var tm = i * 2000;
        (function( time, img ) {
            setTimeout(function() {
                $(img).attr('src', imgsrc).css('width', '100px');
            }, time );
        })( tm, img );
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image_list">

    <a href="images/Image1.jpg" title="Image 1">
        <img class="img" src="images/Image1.jpg" alt="Image 1">
    </a>

    <a href="images/Image2.gif" title="Image 2">
        <img class="img" src="images/Image2.gif" alt="Image 2">
    </a>
    <a href="images/Image3.gif" title="Image 3">
        <img class="img" src="images/Image3.gif" alt="Image 3">
    </a>

    <a href="images/Image4.gif" title="Image 4">
        <img class="img" src="images/Image4.gif" alt="Image 4">
    </a>

    <a href="images/Image5.gif" title="Image 5">
        <img class="img" src="images/Image5.gif" alt="Image 5">
    </a>

</div>

＆＃13;

但是，如果你想要的只是同时更改所有图像，在页面加载后2秒使用它：

$(function() {
    setTimeout(function() {
        $('#image_list .img').attr('src', 'images/back.jpg');
    }, 2000);
});

＆＃13;

$(function() {
    var imgsrc = 'http://aspnethosting2go.com/wp-content/uploads/2014/07/feature1.png';
    setTimeout(function() {
        $('#image_list .img').attr('src', imgsrc).css('width','100px');
    }, 2000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image_list">

    <a href="images/Image1.jpg" title="Image 1">
        <img class="img" src="images/Image1.jpg" alt="Image 1">
    </a>

    <a href="images/Image2.gif" title="Image 2">
        <img class="img" src="images/Image2.gif" alt="Image 2">
    </a>
    <a href="images/Image3.gif" title="Image 3">
        <img class="img" src="images/Image3.gif" alt="Image 3">
    </a>

    <a href="images/Image4.gif" title="Image 4">
        <img class="img" src="images/Image4.gif" alt="Image 4">
    </a>

    <a href="images/Image5.gif" title="Image 5">
        <img class="img" src="images/Image5.gif" alt="Image 5">
    </a>

</div>

＆＃13;

Answer 4

您可以选择img内的所有image_list标记，如下所示：

$("#image_list img")

只需对其进行扩展即可更改所有选定元素的src属性，如下所示：

$('#image_list img').attr('src', 'images/back.jpg')

Answer 5

使用选择器，您不需要迭代。

setTimeout(function(){
    $("#image_list img").attr("src","images/back.jpg");
},2000);

使用jQuery中的.attr（）更改div中的图像src

5 个答案: