Jquery 如何在单击5个图像后重定向到另一个页面

我希望用户在单击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/";
    }
});

---

因为你只检查了一次情况。在教孩子们编程时，我已经多次处理过这个问题

---

将if$change1。。。将块放入函数中，然后在每个块中调用此函数。单击处理程序。

这是一种短得多的方法：

var hitFive=0;

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

---

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

$(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/";
        }
    }
});

您应该这样做：

$("#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/";
}}

---

})

试试这样的方法：

$(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中。就绪。。。您必须检查是否在每次值更改时都单击了所有图像=单击了图像

在文档准备就绪时，仅调用一次if语句

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

....

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

....

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

---

我可以不带轻蔑的讽刺，但你的回答起作用了。谢谢。哎呀，弄乱了一些变量名。已编辑，现在应该可以使用了。