弗兰肯斯坦图像交换JavaScript需要整洁和可能的自动化

Frankenstein image swap JavaScript needs tidy and possible automation

本文关键字：自动化 交换 图像 JavaScript 弗兰肯斯坦      更新时间：2023-09-26

我正在使用以下JavaScript。它工作正常，但它是从各种来源拼凑起来的一团糟。

  • 我有一系列图像。
  • 每个版本都有一个小版本 （1.gif） 和一个隐藏的、预加载的大版本 （_1.gif）。
  • 单击小版本，大版本将替换它。

  • 再次单击，它会换回：

    var lastMove;
lastMove = new Date();
function preload(arr) {for (var i=0; i<arr.length; i++) (new Image()).src = arr[i];}
var index = 0;
var picsA = ["1.gif", "_1.gif"];
preload(picsA); picNumberA = 0;
function showNextPicA() {if (new Date() - lastMove < 200) return false; if (picNumberA == (picsA.length -1)) {picNumberA = 0;} else {picNumberA = picNumberA + 1;}document.getElementById('placeholderA').src = pics1[picNumberA];}
var picsB = ["2.gif", "_2.gif"];
preload(picsB); picNumberB = 0;
function showNextPicB() {if (new Date() - lastMove < 200) return false; if (picNumberB == (picsB.length -1)) {picNumberB = 0;} else {picNumberB = picNumberB + 1;}document.getElementById('placeholderB').src = picsB[picNumberB];}

  • 等，页面上的每个图像都像这样：

    <img src="1.gif" id="placeholderA" onclick="return showNextPicA();"/>

所以，首先：这种混乱是危险的还是不必要的，或者它很好？

第二：有没有办法自动化，以便任何图像文件在单击时都会交换到具有标准前缀（例如_）的版本，然后在再次单击时再次返回？

唷。感谢您的阅读！

如果你能够像jQuery一样使用sth，在onClick中为每个图像，把 

showNextPic($(this))

然后

var prefix = "_";
showNextPic(imgelement) {
    var src = imgelement.attr('src');
    if(src.indexOf(prefix) == -1) {
         src = prefix + src;
    }
    else {
         // remove prefix from src
    }
    imgelement.attr('src', src);
}
相关文章：