Javascript：随机文本，鼠标悬停显示真实文本答案

【问题标题】：Javascript: Random text, on mouseover show real textJavascript：随机文本，鼠标悬停显示真实文本
【发布时间】：2017-05-20 12:51:35
【问题描述】：

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

我希望每个名称都有一个唯一的随机字符串，并且我知道我不应该使用 class 属性来做到这一点，但是我该如何使用 id em> 无需手动列出所有名称？

其次，因为我使用 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

【问题讨论】：

标签： javascript php jquery wordpress random

【解决方案1】：

所以，是的，由于您不想让所有元素都崩溃，所以您要做的第一件事就是意识到 $().each() 是您的朋友。如果您让每个要模糊处理的元素自己处理并分别处理它们的进入和离开事件，那么您将不会遇到您遇到的问题。看看这个：

$(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>

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

希望这会有所帮助！

【讨论】：