首页 文章

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

提问于
浏览
0

我希望用户在点击五个图像后重定向到另一个页面(使用 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/";
    }
});

6 回答

  • 0

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

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

  • 0

    这是一个更短的方法:

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

    你应该做这个 :

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

    });

  • 0

    文档准备好后,只调用一次 if 语句。

    你应该将它封装在一个函数中,并在每次单击图像时调用它,如下所示:

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

    尝试这样的事情:

    $(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(...)内部,您必须检查每次值更改时是否单击了所有图像(=单击图像)

  • 0

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

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

相关问题