我的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来更改图像?


当前回答

我将向您展示如何更改图像src,这样当您单击图像时,它会在HTML中的所有图像中旋转(特别是在d1id和c1类中)。。。无论您的HTML中有2个或更多图像。

我还将向您展示如何在文档准备好后清理页面,以便最初只显示一个图像。

完整的代码

$(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();

    });
});

故障

创建包含图像的链接的副本(注意:您还可以使用链接的href属性来添加功能…例如,在每个图像下面显示工作链接):var$images=$(“#d1>.c1>a”).clone();检查HTML中有多少图像,并创建一个变量来跟踪显示的图像:var$length=$images.length;var$imgShow=0;修改文档的HTML,以便只显示第一个图像。删除所有其他图像。$(“#d1>.c1”).html($(“#d1>.c1>a:first”));单击图像链接时绑定要处理的函数。$(“#d1>.c1>a”).click(函数(事件){$(this).children().attr(“src”,$(“img”,$images).eq(++$imgShow%$length).attr(“src“));event.prpreventDefault();});上述代码的核心是使用++$imgShow%$length循环遍历包含图像的jQuery对象++$imgShow%$length首先将计数器增加1,然后将该数字与图像的数量进行比较。这将使生成的索引从0循环到长度-1,这是$images对象的索引。这意味着该代码可以处理2、3、5、10或100个图像。。。按顺序循环通过每个图像,并在到达最后一个图像时在第一个图像处重新开始。此外,.attr()用于获取和设置图像的“src”属性。为了从$images对象中选择元素,我使用表单$(选择器,上下文)将$images设置为jQuery上下文。然后,我使用.eq()选择具有我感兴趣的特定索引的元素。


jsFiddle示例,包含3个图像

您还可以将src存储在阵列中。jsFiddle示例,包含3个图像

下面是如何将图像周围的锚标记中的hrefs合并在一起:jsFiddle示例

其他回答

希望这能奏效

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

您也可以通过以下方式使用jQuery执行此操作:

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

如果图像源有多个状态,则可以有一个条件。

我将向您展示如何更改图像src,这样当您单击图像时,它会在HTML中的所有图像中旋转(特别是在d1id和c1类中)。。。无论您的HTML中有2个或更多图像。

我还将向您展示如何在文档准备好后清理页面,以便最初只显示一个图像。

完整的代码

$(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();

    });
});

故障

创建包含图像的链接的副本(注意:您还可以使用链接的href属性来添加功能…例如,在每个图像下面显示工作链接):var$images=$(“#d1>.c1>a”).clone();检查HTML中有多少图像,并创建一个变量来跟踪显示的图像:var$length=$images.length;var$imgShow=0;修改文档的HTML,以便只显示第一个图像。删除所有其他图像。$(“#d1>.c1”).html($(“#d1>.c1>a:first”));单击图像链接时绑定要处理的函数。$(“#d1>.c1>a”).click(函数(事件){$(this).children().attr(“src”,$(“img”,$images).eq(++$imgShow%$length).attr(“src“));event.prpreventDefault();});上述代码的核心是使用++$imgShow%$length循环遍历包含图像的jQuery对象++$imgShow%$length首先将计数器增加1,然后将该数字与图像的数量进行比较。这将使生成的索引从0循环到长度-1,这是$images对象的索引。这意味着该代码可以处理2、3、5、10或100个图像。。。按顺序循环通过每个图像,并在到达最后一个图像时在第一个图像处重新开始。此外,.attr()用于获取和设置图像的“src”属性。为了从$images对象中选择元素,我使用表单$(选择器,上下文)将$images设置为jQuery上下文。然后,我使用.eq()选择具有我感兴趣的特定索引的元素。


jsFiddle示例,包含3个图像

您还可以将src存储在阵列中。jsFiddle示例,包含3个图像

下面是如何将图像周围的锚标记中的hrefs合并在一起:jsFiddle示例

您应该向图像标记添加id属性,如下所示:

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

然后您可以使用此代码更改图像的来源:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

我在尝试调用“重新注册”按钮时遇到了同样的问题。经过一些搜索,现在以下功能在几乎所有著名的浏览器(chrome、Firefox、IE、Edge…)中都能正常工作:

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

“theUrl”用于呈现新的captcha图像,在您的情况下可以忽略。最重要的一点是生成新的URL,迫使FF和IE重新阅读图像。