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; 
    });

來源

2010-06-02 jrutter

如果按鈕被點擊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; 
    });

來源

2010-06-02 13:21:40 user113716

你總是將其設置爲null單擊該按鈕時，所以你永遠不會到達else if ...

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

來源

2010-06-02 13:19:53

showBtn是一個局部變量，所以它的值不會在click事件中持續存在。

移動var showBtn = null;以外的click處理程序。

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

來源

2010-06-02 13:20:58 SLaks

您聲明showBtn爲局部變量，所以它只存在直到您的點擊處理程序結束。你需要一個全局變量，如果你想將它設置爲1第一次點擊，並能夠在第二次點擊時檢查1。

來源

2010-06-02 13:21:06 lincolnk

第一個問題是變量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; 
    });

來源

2010-06-02 13:27:20

太棒了，感謝大家的幫助！

我明白了！

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; 
    });

來源

2010-06-02 13:30:10 jrutter

jQuery交換點擊圖像和if/else

回答

相關問題