防止多個功能，如果當前選擇

我有一個導航菜單，懸停後（使用hoverIntent插件和tweenmax動畫）替換與相關的背景圖像的股利。我有這一切工作正常，但我難住的是如何防止在當前選定的元素上重複的動作。例如，如果您將鼠標懸停在第一個上，然後將鼠標懸停在其上，則我不希望在您將鼠標懸停在第一個鼠標上時重複該操作，因爲它已被選中。附上的鏈接我的小提琴http://jsfiddle.net/olichalmers/5csofnhz/1/防止多個功能，如果當前選擇

var homeNav = function() { 
    var tgt = $(this); 

    $("#homeImageNav a ").hoverIntent({ 
     over: homeNavOver, 
     out: homeNavOff, 
     interval: 0 
    }); 

    function homeNavOver() { 

     var tgt = $(this); 
     var bgHold = $("#bgHolder"); 
     var bg = tgt.attr('data-bg'); 

     if (!tgt.hasClass('current')) { 
      TweenMax.set($("#bgHolder"), { 
       opacity: 0, 
       background: bg, 
       scale: 1.1 
      }); 
      TweenMax.to(bgHold, 1.5, { 
       opacity: 1, 
       scale: 1, 
      }); 
     } 
     //tgt.addClass('current'); 
    } 

    function homeNavOff() { 
     //if (tgt.hasClass('current')) { 
     //tgt.removeClass('current'); 
     //} 
    } 
};

這裏是homeNav功能。

來源

2015-05-06 Oliver Chalmers

喜歡的東西[這]（http://jsfiddle.net/5csofnhz/4/）？ – lshettyl

在你的'homeNavOver'函數中，你在設置背景前檢查'if（！tgt.hasClass（'current'））''。但是你已經註釋掉了'tgt.addClass（'current'）;'所以它永遠不會是'.current'。換句話說，你無法判斷它是否被選中並採取相應的行動。 –

你只需要在你的函數的變化 - homeNavOff這樣的：

function homeNavOff() { 
    $('#homeImageNav a').removeClass('current'); 
    $(this).addClass('current'); 
}

看到它在行動上這個fiddle

來源

2015-05-06 09:40:00

令人難以置信的是它是這樣一個簡單的解決方案。你可以告訴我不是最尖銳的JavaScript開發！謝謝Manik。 –

奧利弗，每當我們學到新東西，我很高興我也幫助你。 –

Manik - 你能解釋一下它是如何工作的，因爲據我所知$（this）在這種情況下與$（'＃homeImageNav a'）相同，對嗎？他們不應該相互抵消嗎？再次感謝你的幫助！ –

Look on this : 
    http://jsfiddle.net/5csofnhz/6/

如果有任何疑問隨時問

來源

2015-05-06 09:46:06

更新了你的Fiddle

我添加的是：

一個變量來保存當前選定的鏈接
與懸停鏈接
檢查它，如果它是不一樣的，然後進行背景變化
否則什麼也不做。
每次更新任何鏈接（一或兩個）懸停

來源

2015-05-06 09:46:11 Puneet

感謝這個詳細的答案和有趣的方法普尼內特。看起來我能夠做同樣的事情，但使用Manik的上述建議的代碼更少。這種方法可能更有利嗎？有什麼特別的理由嗎？非常感謝！ –

@OliverChalmers - 沒有特別的原因。每100位開發人員將採取不同的方法來完成一件事。即使起初我曾嘗試使用homeNavOff函數，但後者我嘗試了這種當前的方法。 – Puneet

太好了，非常感謝你的反饋Puneet，祝你有個美好的一天。 –

防止多個功能，如果當前選擇

回答

相關問題