javascript - 如何为每个类应用一个函数的效果？

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>