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

Question

我正在使用以下 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();"/>
  

那么，首先:这个烂摊子是危险的还是不必要的，还是没问题？

其次:有没有一种方法可以自动化，这样任何图像文件都会在单击时切换到带有标准前缀(比如 _)的版本，然后在再次单击时切换回来？

呸。感谢阅读!

Answer 1

如果你能像 jQuery 那样使用某物，在每张图片的 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);
}