jQuery交换点击图像和if/else

问题描述：

Im卡住了，Im在某人点击时设置了一个变量，然后测试了是否存在该变量并执行其他操作。它的一个简单的脚本，我可能会过时，会喜欢某人的想法。jQuery交换点击图像和if/else

$('.view-alternatives-btn').live('click', function() { 



//$("#nc-alternate-wines").scrollTo(); 
    //$('.nc-remove').toggle(); 
    var showBtn = null; 
    if (showBtn == null) { 
    $('.view-alternatives-btn img').attr("src","../images/wsj_hide_alternatives_btn.gif"); 
    $('#nc-alternate-wines').show(); 
    showBtn = 1; 
    console.log(showBtn); 
    } 
    else if (showBtn == 1) { 
    $('.view-alternatives-btn img').attr("src","../images/wsj_view_alternatives_btn.gif"); 
    $('#nc-alternate-wines').hide(); 
    console.log("this " + showBtn); 
    } 
    return false; 
    });

如果按钮被点击3次会怎样？ – SLaks 2010-06-02 13:24:23

答

单击时该变量将永远不存在，因为它在函数内初始化，然后在函数结束时丢失。

如果您想在点击之间存储它，请在点击处理程序之外创建它。

var showBtn = null; 

    $('.view-alternatives-btn').live('click', function() { 

    //$("#nc-alternate-wines").scrollTo(); 
    //$('.nc-remove').toggle(); 

    if (showBtn == null) { 
     $('.view-alternatives-btn img').attr("src","../images/wsj_hide_alternatives_btn.gif"); 
     $('#nc-alternate-wines').show(); 
     showBtn = 1; 
     console.log(showBtn); 
    } 
    else if (showBtn == 1) { 
     $('.view-alternatives-btn img').attr("src","../images/wsj_view_alternatives_btn.gif"); 
     $('#nc-alternate-wines').hide(); 
     console.log("this " + showBtn); 
    } 
    return false; 
    });

答

你总是将其设置为null单击该按钮时，所以你永远不会到达else if ...

您可以改为使用全局变量，或$.data()

答

showBtn是一个局部变量，所以它的值不会在click事件中持续存在。

移动var showBtn = null;以外的click处理程序。

但是，最好的方法是调用jQuery的toggle method。（除toggle不能与live一起使用）

答

您声明showBtn为局部变量，所以它只存在直到您的点击处理程序结束。你需要一个全局变量，如果你想将它设置为1第一次点击，并能够在第二次点击时检查1。

答

第一个问题是变量showBtn是local的功能，所以它被重新定义每次执行脚本..
其次，你正确的检查之前，将其值设置..所以它会总是设置为null ..

由于您将其与live方法绑定，这意味着动态元素，所以我会使用.data()方法。

$('.view-alternatives-btn').live('click', function() { 

var showBtn = $(this).data('showBtn'); 
//$("#nc-alternate-wines").scrollTo(); 
    //$('.nc-remove').toggle(); 
    if (showBtn) { 
    $('.view-alternatives-btn img').attr("src","../images/wsj_hide_alternatives_btn.gif"); 
    $('#nc-alternate-wines').show(); 
    $(this).data('showBtn',true); 
    console.log(showBtn); 
    } 
    else{ 
    $('.view-alternatives-btn img').attr("src","../images/wsj_view_alternatives_btn.gif"); 
    $('#nc-alternate-wines').hide(); 
    console.log("this " + showBtn); 
    } 
    return false; 
    });

答

太棒了，感谢大家的帮助！

我明白了！

var showBtn = 1; 

    $('.view-alternatives-btn').live('click', function() { 

    //$("#nc-alternate-wines").scrollTo(); 
    //$('.nc-remove').toggle(); 

    if (showBtn == 1) { 
     $('.view-alternatives-btn img').attr("src","../images/wsj_hide_alternatives_btn.gif"); 
     $('#nc-alternate-wines').show(); 
     showBtn = 0; 
     console.log(showBtn); 
    } 
    else { 
     $('.view-alternatives-btn img').attr("src","../images/wsj_view_alternatives_btn.gif"); 
     $('#nc-alternate-wines').hide(); 
     console.log("this " + showBtn); 
     showBtn = 1; 
    } 
    return false; 
    });

jQuery交换点击图像和if/else

相关推荐