对同一页面上的多个图像使用相同的 javascript

Question

我有一堆想要放在同一页面上的图像对。 我希望能够使用相同的外部 javascript 代码在每对图像之间切换，即不必为每个项目重复代码。

下面的代码非常适合使用数据属性在一对图像之间切换，但我将如何 go 再次对同一页面上的不同图像对使用相同的代码？

<html>

<head>
    
<div id='urls' data-image1='https://www.dropbox.com/s/79pypzinnvyk36u/apple.jpg?raw=1' data-image2='https://www.dropbox.com/s/2zmsaqhal9ettus/banana.jpg?raw=1'></div>

<script>
    
    var images = document.getElementById('urls');
        var src1 = images.getAttribute('data-image1');
        var src2 = images.getAttribute('data-image2');
    
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == src2)
        {
            document.getElementById("imgClickAndChange").src = src1;
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = src2;
        }
    }
</script>

</head>
    
    <body>
        <p>
        <img alt="" src="https://www.dropbox.com/s/79pypzinnvyk36u/apple.jpg?raw=1" 
            style="width: 100%; max-width:800px; height: auto; border: 0;" id="imgClickAndChange" onclick="changeImage()" />
        </p>
    </body>


</html>```

Answer 1

您当前的 function 仅针对特定图像元素。 但是，如果您查看这些 MDN 文档： event.currentTarget ，您可以访问在事件处理程序回调中触发元素的标签。

I prefer the addEventListener syntax but you can also pass in 'this' in your onClick function call and then access the event object in your changeImage() function to get your toggle behaviour.

Answer 2

我在onClick function中传递了我需要的参数。

<html>

<head>
    

<script>
    
    
    function changeImage(src1, src2,imgID) {

        if (document.getElementById(imgID).src == src2)
        {
            document.getElementById(imgID).src = src1;
        }
        else 
        {
            document.getElementById(imgID).src = src2;
        }
    }
</script>

</head>
    
    <body>
        <p>
        <img alt="" src="https://www.dropbox.com/s/79pypzinnvyk36u/apple.jpg?raw=1" 
            style="width: 100%; max-width:800px; height: auto; border: 0;" id="appleBanana" onclick="changeImage('https://www.dropbox.com/s/79pypzinnvyk36u/apple.jpg?raw=1','https://www.dropbox.com/s/2zmsaqhal9ettus/banana.jpg?raw=1','appleBanana' )" />
        </p>
        
                <p>
        <img alt="" src="https://www.dropbox.com/s/o5khsr21jvec69n/tomato.jpg?raw=1" 
            style="width: 100%; max-width:800px; height: auto; border: 0;" id="tomatoCucumber" onclick="changeImage('https://www.dropbox.com/s/o5khsr21jvec69n/tomato.jpg?raw=1','https://www.dropbox.com/s/zejo8o19c8ropco/cucumber.jpg?raw=1','tomatoCucumber')" />
        </p>
        
    </body>


</html>```