Javascript:随机文本，鼠标悬停时显示真实文本

Question

我希望将 WordPress 博客的所有作者的列表显示为随机字符，鼠标悬停时这些字符会更改为真实姓名。我对 JavaScript 很陌生，我这里的代码基于 Random Text On MouseOver And On MouseLeave Show The Real Text ，因为 Amir 正在寻找与我几乎相同的东西，只是相反。

我想要每个名称都有一个唯一的随机字符字符串，并且我知道我不应该使用 class 属性来实现此目的，但如何使用 id 无需手动列出所有名称？

其次，直到您第一次将鼠标悬停在文本上时，随机字符串才会显示，因为我使用 mouseenter，但是执行此操作的正确方法是什么？

提前致谢!

Javascript:

$(document).ready(function(){
var change_this = $( ".change_this" ).text();

$( ".change_this" ).mouseenter(function() {
    $( ".change_this" ).text( change_this );
});

    $( ".change_this" ).mouseleave(function() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%$';

    for(var i=0; i < $( ".change_this" ).text().length; i++)
    {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    $( ".change_this" ).text( text );
});
})

PHP(我只是展示一切):

foreach ( $blogusers as $user ) {
echo '<p><a href="http://www.untitled-jpg.nl/author/' . esc_html( $user->user_login ) . '/"><span class="x">' . esc_html( $user->display_name ) . '.jpg</span></a></p>'; 
}
?>

用于测试 Javascript:http://jsfiddle.net/pqkdx1sn/1/#&togetherjs=4GUpxUpfvB

Answer 1

所以，是的，您要做的第一件事是意识到 $().each() 是您的 friend ，因为您不想让所有元素崩溃。如果您让每个要模糊的元素自行处理并分别处理它们的进入和离开事件，则不会遇到您所遇到的问题。看看这个:

$(document).ready(function() {
  $(".change_this").each(function(){
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%$', randomText = "";
    // Now create a random string of the same length...
     for (var i = 0; i < $(this).text().length; i++) {
      randomText += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    $(this).attr('data-randomtext', randomText).attr("data-text", $(this).text() ).text(randomText);
    
    $(this).on({
      mouseenter: function() {
        $(this).text($(this).attr("data-text"))
      }, mouseleave: function(){
        $(this).text($(this).attr("data-randomtext"));
      }
    })
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="change_this">Joe Smith</span>.jpg</p>
<p><span class="change_this">Daniel23</span>.jpg</p>
<p><span class="change_this">Mariahbirsak</span>.jpg</p>

我做的第一件事是让每个标记元素将原始文本和随机文本存储为自身的日期属性。然后我立即用随机文本替换原始文本。然后，当这个特定元素获得鼠标悬停/离开事件时，它会根据需要获取自己的数据属性。

希望这有帮助!