Javascript onclick 更改 attritube 更改 localstorage

Question

我有这个脚本，我需要它通过点击“按钮”将图像从默认更改为第二张，并在它用完时添加一个计数器/间隔将图像更改为第三张图像，再次点击时转到再次回到第二张图片并重新启动计时器。需要保存到本地存储，应该没问题。到目前为止我找到了一些帮助，但现在我无法在单击按钮时更改我的 img src。有人可以帮忙吗？

$(document).ready(function() {

  function aktivereSkift(initImagePath = null, initNextImagePath = null, count = 5) {

    if (initImagePath === null || initNextImagePath === null) {
      return false;
    }
    $(this).attr("src", initImagePath);

    let timer = count * 1000;
    let counter = setInterval(timer, 1000);

    function timer() {
      count = count - 1;

      localStorage.setItem('counter', count);
      if (count <= 0) {
        clearInterval(counter);
        return;
      }
    }
    setTimeout(() => $(this).attr('src', initNextImagePath), timer);

    localStorage.setItem('imagepath', initImagePath);
    localStorage.setItem('nextimagepath', initNextImagePath);
  }

  function loadDefaultValues() {
    const initImagePath = localStorage.getItem('imagepath');
    const initNextImagePath = localStorage.getItem('nextimagepath');
    const counter = localStorage.getItem('counter');
    aktivereSkift(initImagePath, initNextImagePath, counter);
  }

  loadDefaultValues();

  $(".toilet").on("click", () => {
    aktivereSkift('/lib/pictures/toiletBegyndt.png', '/lib/pictures/toiletSlut.png');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="toilet" src="~/lib/pictures/toilet.png" style="height:150px;width:150px;" />

Answer 1

this关键字指的是声明this关键字的内部函数。在那种情况下 this 指的是函数而不是 img 元素。

$("#img").attr("src", theImagePath);

Answer 2

好的，这是一个有效的片段，我希望它能满足您的需求。 LocalStorage 在片段中不起作用（出于安全考虑），只需取消注释所有 localStorage 内容即可：

function aktivereSkift(
    initImagePath = null,
    initNextImagePath = null,
    count = 5
) {
    console.log("clicked =", this);

    if (initImagePath === null || initNextImagePath === null) {
        return false;
    }
    $(this).attr("src", initImagePath);

    let timer = count * 1000;
    let counter = setInterval(timerLS.bind(this, count), 1000);

    function timerLS() {
        count = count - 1;

        // localStorage.setItem("counter", count); --> Doesn't work in a Whosebug snippet

        if (count <= 0) {
            clearInterval(counter);
            return;
        }
    }
    setTimeout(() => $(this).attr("src", initNextImagePath), timer);

    // localStorage.setItem("imagepath", initImagePath);
    // localStorage.setItem("nextimagepath", initNextImagePath);
}

function loadDefaultValues() {
    const initImagePath = localStorage.getItem("imagepath");
    const initNextImagePath = localStorage.getItem("nextimagepath");
    const counter = localStorage.getItem("counter");
    aktivereSkift(initImagePath, initNextImagePath, counter);
}

// loadDefaultValues(); --> LocalStorage doesn't work inside a Whosebug snippet

$(".toilet").on("click", function () {
    aktivereSkift.call(
        this,
        "https://picsum.photos/200",
        "https://picsum.photos/200?grayscale"
    );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="toilet" src="https://picsum.photos/200" style="height:150px;width:150px;" />

Javascript onclick 更改 attritube 更改 localstorage

Javascript onclick change attritube change localstorage

javascript

onclick