如何在无限点击时在两个图像之间切换？

Question

如何使用 JS 或 jQuery

在无限点击（不是一次）时在两个图像之间切换

$("button").click(function(){
  $("img").attr("src","The New SRC");
});

此代码有效，但只有一次。

Answer 1

试试这个

var q = 0;

function swapImage() {
  if (q == 0) {
    document.getElementById("image").setAttribute('src', 'https://images.unsplash.com/photo-1562102010-558d6be6268e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    q++;
  } else {
    document.getElementById("image").setAttribute('src', 'https://images.unsplash.com/photo-1567095740613-beef70b7e61c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    q--;
  }
}

<img id="image" src="https://images.unsplash.com/photo-1567095740613-beef70b7e61c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" onclick="swapImage();" />

Answer 2

如果 "forever" 您的意思是您的用户在更改图像后将始终看到相同的图像，则您需要将该信息存储在某个地方。这是一个示例，您将图像源存储在浏览器的本地存储中并读取它以设置图像元素的 src 属性：

<p>
  <img id="my-img" src="">
</p>

<button onclick="changeImage()">
  Change image
</button>

<script>
  const myImg = document.getElementById("my-img")
  const googleLogo = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
  const duckduckgoLogo = "https://cdn.sstatic.net/Sites/Whosebug/img/apple-touch-icon@2.png"
    
  const changeImage = () => {
    if(myImg.src === googleLogo) {
      myImg.src = duckduckgoLogo
      localStorage.setItem("img-src", duckduckgoLogo)
    } else {
     myImg.src = googleLogo
      localStorage.setItem("img-src", googleLogo)
    }
  }
  
  const getImageSrc = () => {
    const loadedSrc = localStorage.getItem("img-src")
    
    if(loadedSrc == null) {
     myImg.src = googleLogo
    } else {
     myImg.src = loadedSrc
    }
  }
  
  getImageSrc()
</script>

注意： 代码是正确的，但它在代码片段中不起作用，因为我正在阅读 localStorage 并且这似乎在 a 中是不允许的片段。

Answer 3

让这个过程尽可能简单，在点击时交换 src 和 data-src。

$('.changeSrc').on('click', function(e){
  let src2= $('#img').data('src2');
  $('#img').data('src2', $('#img').attr('src'));
  alert(src2);
  $('#img').attr('src', src2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img" src="./images/img1.jpg" data-src2="./images/img2.jpg"/>
<button class="changeSrc">Change Picture</button>

如何在无限点击时在两个图像之间切换？

How can I swap between two images on infinite clicks?

javascript

jquery

click