使用 jQuery 在单击时切换图像 [英] Toggle images on click using jQuery

问题描述

我有两张图片，需要在点击图片时切换.

I have two images which I need to toggle on clicking on the image.

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

当用户点击图片时，src 应该得到 data-swap 的值，当你再次点击时 src 应该变成数据源.这应该像切换一样继续发生.任何帮助表示赞赏.

When the user click the image the src should get the value of data-swap and when you click again the src should change to data-src. This should keep happening just like a toggle. Any help appreciated.

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

到目前为止，我已经做到了.

This is where I have got so far.

推荐答案

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

Based on my understanding from your question, Hope this is the one you expect,

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

演示小提琴

这篇关于使用 jQuery 在单击时切换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！