使用 jQuery 在点击时切换图像答案

【问题标题】：Toggle images on click using jQuery使用 jQuery 在点击时切换图像
【发布时间】：2015-02-01 00:34:28
【问题描述】：

我有两张图片需要在点击图片时进行切换。

    <img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' 
data-src='images/prof_arrow1.png' />

当用户单击图像时，src 应获得 data-swap 的值，当您再次单击时，src 应更改为 data-src。这应该像切换一样继续发生。任何帮助表示赞赏。

$("#arrowRotate").click(function() {
    var swapImage = $("#arrowGrey").attr("data-swap");
    $("#arrowGrey").attr({
        'src': swapImage,
        id: 'arrowOrange'
    });
});

这就是我目前所取得的成果。

【问题讨论】：

你能做jsFiddle.net吗？

标签： javascript jquery toggle src attr

【解决方案1】：

根据我对您问题的理解，希望这是您所期望的，

$("#arrowRotate").click(function() { 
      var _this = $(this);
      var current = _this.attr("src");
      var swap = _this.attr("data-swap");     
     _this.attr('src', swap).attr("data-swap",current);   
});

DEMO Fiddle

【讨论】：

是的，这就是我想要的。这对我来说看起来很简单。我可能会实现这一点。但是，我希望您能解释一下以使我理解。但没问题，我会问谷歌。我也感谢其他回答我问题的人。
好的酷，如果你需要，我可以为你解释更多。
我不明白你代码逻辑的最后一行。也许，如果你能解释一下。
哦，我明白了。您正在将data-swap 添加到src 属性，同时将src 添加到data-swap。太好了。
是的，你是对的，我将值保存在变量中并相应地替换它！

【解决方案2】：

试试这个：

$("#arrowRotate").click(function(){
if($(this).attr('src')==$(this).attr('data-src'))
  {
    var a = $(this).attr('data-swap');
    $(this).attr('src',a);
  }     
else
  {
    var b = $(this).attr('data-src');
    $(this).attr('src',b);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='arrowRotate' src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg' data-swap='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg' data-src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg'>

【讨论】：

【解决方案3】：

这可能会有所帮助。我认为这是在图像之间交换最简单的方法：

<img id="arrowRotate" src="images/img1.png" data-swap="images/img2.png" data-src="images/img1.png" onclick="swapImage()" />

function swapImage(){
    var swapImage = $('#arrowRotate').attr('data-swap'),
        currentImage = $('#arrowRotate').attr('src');

    $('#arrowRotate').attr({
        'src': swapImage,
        'data-swap': currentImage
    });
};

【讨论】：

【解决方案4】：

如果我理解正确，你可以这样做：

HTML

<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' data-src='images/prof_arrow1.png' data-swapped="false"/>

Javascript

$("#arrowRotate").click(function() {

    var swapped = $(this).attr("data-swapped");
    var init = 'false';

    if(swapped === 'false'){
        var swapImage = $(this).attr("data-swap");
        init = true;
    }else{
        var swapImage = $(this).attr("data-src");
    }

    $(this).attr({
        'src': swapImage,
        'id': 'arrowOrange',
        'data-swapped': init
    });

});

【讨论】：