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

Question

I have this code made to shuffle characters randomly and create an hover effect. I'm using it for a navigation. But it appears that my code works only for a single class and when I put multiple classes it breaks everything and generate a shuffle for everything at the same time, indefinitly ....

BEWARE : use the snippet with caution it can make your navigator crashed...

 // 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

If you pass the current element to the function, you can limit the scope like this:

 // 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>