合併懸停與jQuery中的If語句

Question

我使用Cycle plugin進行幻燈片顯示。它有一個內置的「暫停鼠標懸停」功能，但是我想讓導航元素也隨鼠標一起更改。

這很容易完成，但我想保持暫停/播放狀態。也就是說，如果用戶點擊了暫停按鈕，當鼠標懸停時我什麼也不做。但是，如果他們沒有暫停它，我想在懸停和停止時做一些事情。

下面是當點擊暫停/播放按鈕的代碼：

$('#pauseButton').click(function() { 
    $('#news').cycle('pause'); 
    $('#pauseButton').hide(); 
    $('#playButton').show(); 
}); 
$('#playButton').click(function() { 
    $('#news').cycle('resume'); 
    $('#pauseButton').show(); 
    $('#playButton').hide(); 
}); 

我的第一個做到這一點的嘗試是這樣的：

$('#news div').hover(function() { 
    $('#pauseButton').show(); 
    $('#playButton').hide();  
    $('#paused').css({background:"#ff9000"}); 
}, function(){ 
    $('#pauseButton').hide(); 
    $('#playButton').show(); 
}); 

的問題是，無論用戶是否有暫停了幻燈片放映，然後暫停播放幻燈片放映。

它似乎應該很容易把「if」語句放在那裏，但我無法弄清楚它會到哪裏去。

Answer 1

如果禁用該插件的「暫停上鼠標懸停」選項，然後你可以自己做：

//setup a flag to detect if the show should play or not 
var pause_show = false; 

//pause on mouseover 
$('#slideshow-id').on('mouseover', function() { 

    $('#news').cycle('pause'); 
    $('#pauseButton').hide(); 
    $('#playButton').show(); 

//play on mouseleave only if flag is not set to `false` (meaning the pause button has not been clicked) 
}).on('mouseleave', function() { 

    //if the show has not been paused with the pause button then resume the show 
    if (pause_show === false) { 
     $('#news').cycle('resume'); 
     $('#pauseButton').show(); 
     $('#playButton').hide(); 
    } 
}); 

//set flag to true (block play on mouseleave) when the user clicks on the 
$('#pauseButton').on('click', function() { 
    pause_show = true; 
}); 
$('#playButton').on('click', function() { 
    pause_show = false; 
}); 

注意.on()是jQuery的1.7新是一樣的在這種情況下.bind()。