单击所有图像时调用函数答案

【问题标题】：call on function when all images are clicken on单击所有图像时调用函数
【发布时间】：2013-02-12 22:12:00
【问题描述】：

我想调用一个打开新链接的函数。我想在点击所有图片后执行此操作。我怎样才能做到这一点？

HTML

<!DOCTYPE HTML> 
<html>
<head>
    <meta charset="windows-1252"> 
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">   </script>
        <![endif]--> 
    <title>Date med mig - version b
    </title>
    <script type="text/javascript">
    function newWindow()
    {
        window.location = window.location = "http://www.tv3.se/datemedmig"
    }
    </script>
</head>
    <body>
    <h1>Del 2: Date med mig</h1>    

    <img src="1_c.jpg" id="image1" onclick="this.src='1_o.jpg';" alt="image" />
    <img src="2_c.jpg" id="image1" onclick="this.src='2_o.jpg';" alt="image" />
    <img src="3_c.jpg" id="image1" onclick="this.src='3_o.jpg';" alt="image" />
    <img src="4_c.jpg" id="image1" onclick="this.src='4_o.jpg';" alt="image" />

    </body>
</html>

【问题讨论】：

到目前为止你尝试过什么？您的问题目前的形式过于宽泛，无法在 Stack Overflow 上获得许多有用的回复。
我实际上不知道在哪里以及如何调用我的函数 newWindow()，以便在单击每个图像后调用它。
顺便说一句，多个元素使用相同的 ID 是个坏主意，会自找麻烦。
哦，是的，我的错。谢谢！

标签： javascript html window image

【解决方案1】：

如果您试图在单击任何图像后立即加载一个新窗口，我认为@runfaj 所说的方式可能是最好的，我的理解是您只想在所有之后才这样做图片被点击了？

如果是这种情况，这里有一个选项（这可能不是最有效的）

//Assuming there are 4 images
var hasBeenClicked = [false,false,false,false]

//To be called when each image is clicked
function imageClicked(whichImage){ 

    this.src = "'"+whichImage+"_o.jpg'"

    //set this position in the array equal to true
    hasBeenClicked[whichImage] = true

    // if the array is completely true (every image has been clicked)
    // call the newWindow function
    if(hasBeenClicked == [true,true,true,true]){
          newWindow();
    }

}

那么当你创建一个图像时：

<img src="1_c.jpg" id="image1" onclick="imageClicked(1);" alt="image" />

【讨论】：

，这就是我调用函数的方式，但它不起作用？
我正确调用了函数？
我无法让它工作。我这样称呼它：，但什么也没发生，我在每个 img 中都这样做
if(hasBeenClicked == [true,true,true,true]){ ，此行不执行。我试着在里面放一个警报，但它从来没有到达过。
现在就试试吧。但基本上你需要做的是让源代码更改成为另一个函数的一部分，它可以做你想做的一切，所以你只在 onclick 中调用一个函数，但在那个函数中你可以做很多事情。

【解决方案2】：

你可以通过三种方式做到这一点：

jquery:

$('img').click(newWindow);

内联：

<img src=..... onclick="newWindow()" />

普通的javascript：

获取所有标签：

var imgs = document.getElementByTagName('img');

然后为每个事件添加一个事件监听器（谷歌它有很多不同的例子）

【讨论】：

【解决方案3】：

有一个 onclick 功能，该功能会为每个图像触发，该功能会在图像标签上设置一个新属性。然后对所有图像运行循环以检查它们是否都有标签。如果是这样，请打开新窗口。例如：

$('img').click(function() {
    $(this).data('was-clicked', true);

     var all_clicked = true;
     $('img').each(function() {
         if($(this).data('was-clicked') != true) {
             all_clicked = false;
             break;
         }
     });

     if(all_clicked == true) newWindow();
 });

请注意，此代码未经测试，可能存在语法/语义错误。此外，您可能并不真的希望用户单击所有图像标签（例如横幅、背景等），因此您应该修改 jquery 选择器以仅过滤您感兴趣的“img”标签，例如$('#my-gallery img')...

【讨论】：

谢谢，但解决方案应该是纯javascript，没有jQuery。