如何解决js库中的下一个按钮

Question

我在使用 JavaScript 中的图片库时遇到了一些问题。一切正常，但经过几次操作后加载下一张图像的处理时间太长。这是一个代码：

function showbox(x)
{
  document.getElementById("box").style.visibility = "visible";
  for(i=1; i<5; i++){
    document.getElementById("d"+i).innerHTML="&#9675;";
  }
  if (x==1){
    document.getElementById("myImg").src = "img1.gif"; 
    document.getElementById("d"+x).innerHTML="&#9679;";
    $('#rightbutton').click(function() { showbox(x+1); });
    $('#leftbutton).click(function() { showbox(x-1); });
    return 0;
  } else if (x==2){
    document.getElementById("myImg").src = "img2.gif"; 
    document.getElementById("d"+x).innerHTML="&#9679;";
    $('#rightbutton').click(function() { showbox(x+1); });
    $('#leftutton').click(function() { showbox(x-1); });
    return 0;
  }
  E.t.c


  function nextimg(y){
    showbox(y);
  }

  function prvimg(y){
    showbox(y);
  }

Answer 1

每次调用 showbox 时，您都会为 #rightbutton 和 #leftbutton 元素设置新的 click 事件处理程序，而不删除之前的事件处理程序。因此，您单击这些按钮的次数越多，它们获得的事件处理程序就越多，从而导致更多的事件等等。只需在文档加载时分配一次事件处理程序。

此外，为什么 showbox return 0 无论 if 语句的结果如何，并且考虑到您从不对 return 做任何事情价值？看起来你甚至不需要那个（如果你需要，只需在 if 语句之后有一次 return 0）。

此外，nextimg 和 prvimg 这两个函数也没有必要，因为它们都做同样的事情，就是调用 showbox。不要调用这些函数，只需调用 showbox.

最后，请确保在 DOM 准备好后立即获得您需要的 DOM 参考资料，而不是在您需要它们的最后一刻，然后再次下次 - 将它们存储在一个变量中。

如何解决js库中的下一个按钮

How to solve next button in js gallery

javascript

function

gallery