使用jQuery更改图像源

个人DOM看起来像这样：

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

当有人单击图像时，我但愿图像src更改成<img src="imgx_off.gif">其中x表示图像编号1或2。

这可能吗，仍是我必须使用CSS来更改图像？

---

#1楼

我今天也有一样的疑问，我是这样作的：

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

---

#2楼

没法使用CSS更改图像源。

惟一可行的方法是使用Javascript或jQuery之类的任何Javascript库。

逻辑-

这些图像位于div内，而且该图像没有class或id 。

所以，逻辑将选择图像所在的div内的元素。

而后使用循环选择全部图像元素，并使用Javascript / jQuery更改图像src。

带演示输出的示例代码-

$(document).ready(function() { $("button").click(function() { $("#d1 .c1 a").each(function() { $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe'); }); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <div id="d1"> <div class="c1"> <a href="#"><img src="img1_on.gif"></a> <a href="#"><img src="img2_on.gif"></a> </div> </div> <button>Change The Images</button>

---

#3楼

我将向您展现如何更改图像src ，以便当您单击图像时，它会在HTML中的全部图像（特别是在d1 id和c1类中）中旋转...不管您有2个或更多图像在您的HTML中。

我还将向您展现文档准备好后如何清理页面，以便最初仅显示一张图像。

完整代码

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

细目

1. 建立包含图像的连接的副本（注意：您也能够利用连接的href属性来增长功能……例如，在每一个图像下方显示工做连接 ）：

   var $images = $("#d1 > .c1 > a").clone(); ;

2. 检查HTML中有多少张图片，并建立一个变量来跟踪显示的图片：

   var $length = $images.length; var $imgShow = 0;

3. 修改文档的HTML，以便仅显示第一张图像。 删除全部其余图像。

   $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

4. 绑定一个函数以在单击图像连接时进行处理。

   $("#d1 > .c1 > a").click(function(event) { $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ); event.preventDefault(); });

   上面代码的核心是使用++$imgShow % $length循环浏览包含图像的jQuery对象。 ++$imgShow % $length首先将咱们的计数器增长一，而后使用多少个图像修改该数字。 这将使结果索引从0循环到length-1 ，它们是$images对象的索引。 这意味着此代码将适用于二、三、五、10或100张图像...依次循环浏览每一个图像，并在到达最后一个图像时在第一个图像处从新启动。

   此外， .attr()用于获取和设置图像的“ src”属性。 为了从$images对象中选择元素，我使用$(selector, context)形式将$images设置为jQuery上下文 。 而后，我使用.eq()来选择仅包含我感兴趣的特定索引的元素。

---

具备3张图片的jsFiddle示例

您也能够将src存储在数组中。
具备3张图片的jsFiddle示例

如下是在图像周围合并来自定位标记的href的方法：
jsFiddle示例

---

#4楼

您也能够经过如下方式使用jQuery：

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

若是图像源有多个状态，则能够设置条件。

---

#5楼

欲得到更多信息。 我尝试使用如下语法在广告图片的jquery中使用attr方法设置src属性，例如： $("#myid").attr('src', '/images/sample.gif');

此解决方案颇有用，而且可使用，可是若是更改路径，则图像的路径也会更改而没法使用。

我正在寻找解决此问题的方法，但没有发现任何问题。

解决方案是将“ \\”放在路径的开头： $("#myid").attr('src', '\\images/sample.gif');

这个技巧对我很是有用，我但愿对其余人也有用。