Question

我试图在屏幕上调整两个图像，它们上方有两个独立的计数器。我也试图使它模块化并使用一个函数，它对两个图像上的onClick方法进行初始化。然而事情的确如我所料。这两个计数器指向相同的内存位置，单击任何图像都会从同一个计数器中检索该值。我该如何解决它并保持模块化？

。

<!DOCTYPE html>
<html>
<body>
<p id="text1"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image1">
<p id="text2"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image2">
<script>


function Counter(idText,idImage){
    var that = this;
    that.counter = 0;
    document.getElementById(idImage).onclick = function(){
    document.getElementById(idText).innerHTML = (++that.counter);
    };
}

var image1 = Counter("text1","image1");
var image2 = Counter("text2","image2");
</script>

</body>
</html>

Answer 1

在您当前的代码中，Counter("text1","image1");只会调用该函数，其执行上下文将为window，因此两个图像都将使用window.counter作为其计数器。

因此，您需要在new之前添加Counter，现在将Counter作为构造函数，创建一个新对象，然后执行Counter中的代码，而this将指向新创建的object。所以这两个对象都将独立地拥有它们的价值。

在这种情况下，image1将是对象，其属性为counter，因此您可以使用image1.counter来访问其他位置的计数器值。

＆＃13;

<!DOCTYPE html>
<html>
<body>
<p id="text1"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image1">
<p id="text2"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image2">
<script>


function Counter(idText,idImage){
    var that = this;
    that.counter = 0;
    document.getElementById(idImage).onclick = function(){
    document.getElementById(idText).innerHTML = (++that.counter);
    };
}

var image1 = new Counter("text1","image1");
var image2 = new Counter("text2","image2");
</script>

</body>
</html>

＆＃13;

另一种方法是使用var counter = 0;代替this.counter = 0。然后当每个图像通过函数添加计数器时，其click事件处理程序将只看到counter中声明的Couter。这是Closures方式。

在这种情况下，var image1 = Counter("text1","image1");，var image1不是必需的，您只需使用Counter("text1","image1");，但如果您仍想对其进行某些控制，则可以在Counter中返回{1}}来控制它。这样，用户只能通过您提供的功能更改/查看值。

＆＃13;

<!DOCTYPE html>
<html>
<body>
<p id="text1"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image1">
<p id="text2"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image2">
<script>


function Counter(idText,idImage){
    var counter = 0;
    document.getElementById(idImage).onclick = function(){
    // Now each image's handler will see the counter we just defined, 
    // And not get messed with other images that also call the `Counter` function.
    document.getElementById(idText).innerHTML = (++counter);
    };
  
    var setZero = function() {
      counter = 0;
      document.getElementById(idText).innerHTML = 0;
    };
    var shoutCount = function() {
      alert('You clicked on' + idImage+ ' ' + counter + 'times.');
    };
    return {
      setZero: setZero,
      shoutCount: shoutCount
    };
}

// If we want to have some control to image1 , but don't care other.
// Get the control's return by Counter call
var image1 = Counter("text1","image1"); 
// We don't want to control image2, simply call is ok.
Counter("text2","image2"); 
setTimeout(function() {
  image1.shoutCount();
  image1.setZero();
}, 3000);
</script>

</body>
</html>

＆＃13;

Answer 2

<!DOCTYPE html>
<html>
<body>
<p id="text1"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image1">
<p id="text2"></p>
<img src="http://www.w3schools.com/images/colorpicker.gif" id="image2">
<script>

function getImage(idText,idImage){
    var newImage = new Object();
    newImage.counter = 0;
    newImage.onClick = function(){
        document.getElementById(idText).innerHTML = (++newImage.counter);
    };


    document.getElementById(idImage).onclick = newImage.onClick;

}

getImage("text1","image1");
getImage("text2","image2");
</script>

</body>
</html>

如何通过多次调用函数来初始化多个图像的onclick

2 个答案: