Question

单击图像时，我希望将其替换为其他图像。单击新替换的图像后，我希望它更改回原始图像。现在图像被替换但不会改变。不知道我做错了什么。

HTML

<img src="{{ 'onesize-triangle.png' | asset_url }}" class="size-btn onesize-btn" data-quantity="{{ variant.available }}" data-id="{{ variant.id }}" id="imgClickAndChange" data-size="{{ variant.title }}" onclick="changeImage()"/>

的jQuery

function changeImage() {

      if (document.getElementById("imgClickAndChange").src = "{{ 'onesize-triangle.png' | asset_url }}") 
      {
          document.getElementById("imgClickAndChange").src = "{{ 'onesize-triangle_on.png' | asset_url }}";
      }
      else 
      {
          document.getElementById("imgClickAndChange").src = "{{ 'onesize-triangle.png' | asset_url }}";
      }
}

Answer 1

if语句中缺少

==，请按以下步骤操作：

  if (document.getElementById("imgClickAndChange").src == "{{ 'onesize-triangle.png' | asset_url }}")

加上你的其他部分首先清除以前的src，然后添加新的src，如下所示：

Answer 2

查看此演示

http://jsfiddle.net/AmqcY/

JS CODE

$(document).ready(function(){
  //use event delegation
  $(document).on('click','#imageid',function(){

    var $this= $(this);
    $('#toggle').toggle('slide',function(){
      //swap src of the image on toggle is completed
      var imgsrc = $this.attr('src');
      $this.attr('src',$this.data('othersource'));
      $this.data('othersource',imgsrc);
   });
  });
});

第二次点击后，图像不会切换回原始状态

2 个答案: