如何为每个班级应用一个功能的效果？

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>