Question

目前我是JavaScript的初学者。每当我点击一个按钮，我想让我的网站可以更改图片。

这是我的HTML文件：

<div id="images">
    <img src="img/80673284_74c3361ed19c018192c338d338d27d67.jpg" id="previewimage">
</div>
<button onclick="changepic()" id="buttonback" class="btn btn-primary">Back</button>

单击按钮后，将执行changepic功能。这是我的Javascript代码：

function changepic(source){
    document.getElementById('previewimage').src = source;
}

我选择＆＃34;来源＆＃34;参数作为字符串变量，是一个链接。我的计划是为我的数组中的每个元素调用此函数，我称之为＃34; link＆＃34;。但是，这是否意味着我需要将变量link=[]作为全局变量？我想，做javascript，我们需要尽可能避免全局变量。每次按下按钮都无法创建链接，因为效率不高。

有什么想法吗？

Answer 1

“我认为，做javascript，我们需要尽可能地避免全局变量” - 确实只有在必要时才使用全局变量，但你不应该完全避免使用它们。

在您的情况下，不使用全局变量的替代方法是使用当前图像名称或索引将参数传递给函数，或者使用元素的属性查询使用的当前图像，这会使代码有点更麻烦，更复杂，因此在代码中使用全局参数没有任何问题。

如您所知，创建一个links数组并在每次点击时增加其索引。

这是一个例子。

var currentImage = 0;
var links = [
     "http://www.gstatic.com/webp/gallery/1.jpg",
     "http://www.gstatic.com/webp/gallery/2.jpg",
     "http://www.gstatic.com/webp/gallery/3.jpg"
];
    
function changepic() {

    // Increment the value
    currentImage++;
    
    // Reset the counter if all images were used
    if (currentImage >= links.length)
        currentImage = 0;
    
    document.getElementById('previewimage').src = links[currentImage];
}

<div id="images">
    <img src="http://www.gstatic.com/webp/gallery/4.jpg" id="previewimage" width="200">
</div>
<button onclick="changepic();" id="buttonback" class="btn btn-primary">Back</button>

Answer 2

这个怎么样！它可以避免你从全局变量链接......

<script type="text/javascript">
function link() {
  return [
  "link1",
  "link2",
  "link3"
  ];
}
function changepic(){
    var lk = link();
    //implement code
    //document.getElementById('previewimage').src = source;
}
</script>

JavaScript需要避免全局变量

2 个答案: