如何為每個班級應用一個功能的效果？

Question

我制作了這段代碼來隨機洗牌並創建懸停效果。 我將其用於導航。 但似乎我的代碼僅適用於單個類，當我放置多個類時，它會破壞所有內容並同時為所有內容生成隨機播放……。

注意：謹慎使用代碼段可能會使您的導航器崩潰...

 // Shuffle jQuery(function($) { function text_shuffle() { "use strict"; var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*?><[]&@#)(.%$-_:/;?!"; $_inter = setInterval(function() { var text = $(".text-shuffle").text(); text = text.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.substring(counter+1); $(".text-shuffle").text(text); counter = (counter+1)%text.length; }, 150); } var value, $_inter; $(".text-shuffle").mouseenter( function(){ value = $(this).html(); text_shuffle(); }). mouseout(function(){ clearInterval($_inter); $(this).html(value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="text-shuffle">Title 1</div> <div class="text-shuffle">Title 2</div> <div class="text-shuffle">Title 3</div> 

Answer 1

如果將當前元素傳遞給函數，則可以這樣限制范圍：

 // Shuffle jQuery(function($) { function text_shuffle($element) { "use strict"; var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*?><[]&@#)(.%$-_:/;?!"; $_inter = setInterval(function() { var text = $element.text(); text = text.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.substring(counter+1); $element.text(text); counter = (counter+1)%text.length; }, 150); } var value, $_inter; $(".text-shuffle").mouseenter( function(){ value = $(this).html(); text_shuffle($(this)); }). mouseout(function(){ clearInterval($_inter); $(this).html(value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="text-shuffle">Title 1</div> <div class="text-shuffle">Title 2</div> <div class="text-shuffle">Title 3</div>