第一次點擊做第一個功能，其他點擊做其他功能

我有一個功能，在點擊時切換圖像src，但是，我需要確保他們不能連續多次點擊同一張照片，所以1個圖像不會走開。再加上其他一些事情需要在未來發生。第一次點擊做第一個功能，其他點擊做其他功能

現在的問題是我盡我最大努力做到這一點，但仍然無法弄清楚。不知怎的，它停留在第一if

這裏是我的代碼：

var countSwitch = 0; 
if(countSwitch == 0){ 
    $('.display-img').click(function(){ 
     countSwitch++; 

     selectImg = $(this).find('img').attr('src'); 
     $(this).addClass('last-clicked'); 

     currentImg = $('.prime-img img').attr('src'); 

     $(this).find('img').attr('src', currentImg); 

     $('.prime-img img').fadeOut(400, function() { 
      $('.prime-img img').attr('src', selectImg); 
     }).fadeIn(400); 
     console.log('eerste count', countSwitch); 
     console.log('eerste'); 
    }); 
} 
if(countSwitch >= 0){ 
    $('.display-img').click(function(){ 
     $('figure').removeClass('last-clicked'); 
     $(this).addClass('last-clicked'); 

     selectImg = $(this).find('img').attr('src'); 
     currentImg = $('.prime-img img').attr('src'); 

     $(this).find('img').attr('src', currentImg); 

     $('.prime-img img').fadeOut(400, function() { 
      $('.prime-img img').attr('src', selectImg); 
     }).fadeIn(400); 
     console.log('2e'); 
     console.log('2e count', countSwitch); 

    }); 
}

來源

2016-02-29 J.Dekkers

您需要檢查點擊處理程序中的條件 –

它應該大於符號而不是小於符號。 –

@ArunPJohny謝謝你的修復！如果你想讓我確認你的答案，請將它作爲一個發佈:-D –

你需要把你的countSwitch變量，如果點擊事件中的語句：使用條件

var countSwitch = 0; 

$('.display-img').click(function(){ 

    if(countSwitch == 0) { 
     countSwitch++; 
     selectImg = $(this).find('img').attr('src'); 
     $(this).addClass('last-clicked'); 

     currentImg = $('.prime-img img').attr('src'); 

     $(this).find('img').attr('src', currentImg); 

     $('.prime-img img').fadeOut(400, function() { 
      $('.prime-img img').attr('src', selectImg); 
     }).fadeIn(400); 
     console.log('eerste count', countSwitch); 
     console.log('eerste'); 
    } else { 
     $('figure').removeClass('last-clicked'); 
     $(this).addClass('last-clicked'); 

     selectImg = $(this).find('img').attr('src'); 
     currentImg = $('.prime-img img').attr('src'); 

     $(this).find('img').attr('src', currentImg); 

     $('.prime-img img').fadeOut(400, function() { 
      $('.prime-img img').attr('src', selectImg); 
     }).fadeIn(400); 
     console.log('2e'); 
     console.log('2e count', countSwitch); 
    } 
});

來源

2016-02-29 09:54:32 jcubic

另一種方式可能是第一次點擊刪除事件並添加下一個事件，但它比僅僅是如果更難。 +1 – Salketer

這將無法正常工作，因爲在檢查值是否等於0之前，您將countSwitch設置爲1，而這絕不會是。 –

@AshwinvanDijk你的權利，謝謝你指出。 – jcubic

而不是檢查，使用更清潔的方法使用one

$('.display-img').one("click", function(){ 

    //first function call 

    //now bind the second click handler 
    $('.display-img').bind("click", function(){ 
     //second function call 
    }); 

});

來源

2016-02-29 09:55:33 gurvinder372

您在附加事件時評估您的if語句。您需要讓他們在事件觸發時進行評估。

我想這可能工作：

var countSwitch = 0; 
$('.display-img').click(function(){ 
    if(countSwitch == 0){ 
     countSwitch++; 
     // handle first click 
    } else { 
     // handle further clicks 
    } 
});

來源

2016-02-29 09:58:22 OscarJ

正如阿倫所說，你需要檢查的點擊處理程序中的條件。在編寫函數時，第二個處理程序永遠不會被初始化。我簡化了你的代碼，而製成的一種方式，你可以做一個這樣的例子：

var countSwitch = 0; 

$('.click-handler').click(function(){ 

    if(countSwitch === 0) { 
    firstFunction(); 
    } else { 
    secondFunction(); 
    } 

    countSwitch++; 

}); 


function firstFunction() { 
    console.log('First count', countSwitch); 
} 

function secondFunction() { 
    console.log('Second count', countSwitch); 
}

http://jsbin.com/tuponisado/edit?js,console,output

來源

2016-02-29 10:01:19

你實現運行一次，評估（countSwitch == 0）是真的，然後添加一個（第一）將始終執行的事件處理程序。

根據您想達到的具體行爲，您可以：

按照gurvinder372的建議和使用。一（）和.bind（），如果你的第一個函數應該只運行一次每圖片。
使用OscarJ的實現，它添加了一個.click（）事件處理程序並使用countSwitch的值來確定要執行的代碼。我相信這是你想要達到的目標。
最後，由於您提到不想丟失數據，您還可以使用HTML5的數據屬性來存儲您的初始圖像路徑。如果每個圖像需要更改爲不同的圖像，則還可以在此處存儲新圖像的路徑。屬性將始終保持不變，因此在操縱元素時不會冒險失去任何東西。

對於HTML5數據屬性，我推薦閱讀MDN's guide。 jQuery的.data()也使用這些屬性來獲得它們的價值。

來源

2016-02-29 10:07:43

第一次點擊做第一個功能，其他點擊做其他功能

回答

相關問題