点击5张图片后如何重定向到另一个页面答案

【问题标题】：How to redirect to another page after clicking 5 images点击5张图片后如何重定向到另一个页面
【发布时间】：2014-08-13 19:07:11
【问题描述】：

我希望用户在单击五个图像（ID 为“image1”、“image2”、“image3”、“image4”和“image5”）后被重定向到另一个页面。我不太确定为什么这段代码不起作用。任何帮助将不胜感激！

$(function() {
    $change1 = false;
    $change2 = false;
    $change3 = false;
    $change4 = false;
    $change5 = false;

    $("#image1").click(function() {
        $change1 = true;
    });
    $("#image2").click(function() {
        $change2 = true;
    });
    $("#image3").click(function() {
        $change3 = true;
    });
    $("#image4").click(function() {
        $change4 = true;
    });
    $("#image5").click(function() {
        $change5 = true;
    });

    if ($change1 && $change2 && $change3 && $change4 && $change5) {
        window.location = "http://www.google.com/";
    }
});

【问题讨论】：

标签： jquery image function redirect click

【解决方案1】：

因为您只检查条件一次。在教孩子们编程时，我已经多次处理过这个确切的问题。

将if ($change1...) 块放入一个函数中，然后在每个.click() 处理程序中调用该函数。

【讨论】：

可以不用贬低讽刺，但你的回答有效。谢谢。

【解决方案2】：

这是一种更短的方法：

var hitFive=0;

$('img[id^=image]').click(function(){
    hitFive++;
    if(hitFive>=5){
        window.location = "http://www.google.com/";
    }
});

【讨论】：

【解决方案3】：

你应该这样做：

$("#image1").click(function() {
    $change1 = true;
    test5Click();
});

$("#image2").click(function() {
    $change2 = true;
    test5Click();
  });

 $("#image3").click(function() {
    $change3 = true;
    test5Click();
});

$("#image4").click(function() {
    $change4 = true;
    test5Click();
});

$("#image5").click(function() {
    $change5 = true;
    test5Click();
});

function test5Click() {
if ($change1 && $change2 && $change3 && $change4 && $change5) {
    window.location = "http://www.google.com/";
}}

});

【讨论】：

【解决方案4】：

您的 if 语句仅在文档准备就绪时被调用一次。

您应该将其封装在一个函数中，并在每次单击图像时调用它，如下所示：

....

$("#image1").click(function() {
    $change1 = true;
    checkClickedImages();
});

....

function checkClickedImages() {
  if ($change1 && $change2 && $change3 && $change4 && $change5) {
      window.location = "http://www.google.com/";
  }
};

【讨论】：

【解决方案5】：

试试这样的：

$(document).ready(function(){

    change1 = false;
    change2 = false;
    change3 = false;
    change4 = false;
    change5 = false;

    $('#image1').bind('click', function(){
        change1 = true;
        update();
    });
    $('#image2').bind('click', function(){
        change2 = true;
        update();
    });
    $('#image3').bind('click', function(){
        change3 = true;
        update();
    });
    $('#image3').bind('click', function(){
        change3 = true;
        update();
    });
    $('#image4').bind('click', function(){
        change4 = true;
        update();
    });
    $('#image5').bind('click', function(){
        change5 = true;
        update();
    });
});

function update(){

    if(change1 && change2 && change3 && change4 && change5){
        window.location = "http://www.google.com/";
    }
}

事件处理程序应该在 $(document).ready(...) 中，并且您必须检查每次值更改时是否单击了所有图像（= 单击图像）

【讨论】：

哎呀，有些变量名弄乱了。已编辑，现在应该可以使用了。

【解决方案6】：

检查和重定向的代码需要在每个点击处理程序中调用。您可以使代码更短，如下所示：

$(function() {
    var changes = [ false, false, false, false, false ];

    $("[id^=image]").click(function() {
        var n = this.id.split('').pop();
        if( $.isNumeric( n ) && n > 0 && n < 6 ) {
            changes[ n - 1 ] = true;
        }
        checkGo();
    });

    function checkGo() {
        if (changes[0] && changes[1] && changes[2] && changes[3] && changes[4]) {
            window.location = "http://www.google.com/";
        }
    }
});

【讨论】：