如何通過多次調用函數來初始化多個圖像的onclick

我試圖在屏幕上用兩個獨立的計數器在屏幕上同步兩個圖像。以及我試圖使其模塊化，並使用一個函數，在兩個圖像上的onClick方法進行初始化。然而事情按照我的預期行事。這兩個計數器指向相同的內存位置，單擊任何圖像將從同一計數器中檢索該值。我該如何解決它，但仍然保持模塊化？如何通過多次調用函數來初始化多個圖像的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>

來源

2015-08-08 C graphics

櫃檯前加'new'。 – fuyushimoya

在你當前的代碼將簡稱該功能，其執行上下文會window，所以無論圖像將使用該window.counter作爲他們的櫃檯。

所以你需要添加new之前Counter，它現在就Counter作爲一個構造函數，創建一個新的對象，然後在Counter執行代碼，而this將指向新創建object。所以這兩個對象都會獨立地有它們的價值

在這種情況下，image1將是對象，它具有屬性counter，因此您可以使用image1.counter訪問其他位置的計數器值。

<!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>

另一種方式使用var counter = 0;代替this.counter = 0。然後，當每個圖像通過該函數添加計數器時，其單擊事件處理程序將只會看到在Couter中聲明的counter。這是Closures的方式。

在這種情況下，var image1 = Counter("text1","image1");，該var image1是沒有必要的，你可以只使用，但如果你仍然想一定的控制，你可以在Counter返回財產以後對其進行控制。這樣，用戶只能通過您提供的功能更改/查看值。

<!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>

來源

2015-08-08 18:33:40 fuyushimoya

我想這裏也需要新的東西。 –

只是想知道......在第二個例子中，是否有必要將'Counter（）'的結果賦值給'var image1'？你能夠自己調用'Counter（）'嗎？即使沒有「新」作品，也可以使用 – thelittlegumnut

！只需Counter（「text1」，「image1」）; 計數器（「text2」，「image2」）;但爲什麼？！ –

<!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>

來源

2015-08-08 18:46:55

如何通過多次調用函數來初始化多個圖像的onclick

回答

相關問題