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（）是你的朋友。如果您要使每个元素都模糊处理并分别处理它们的进入和离开事件，那么您将不会遇到问题。看看这个：

＆＃13;

$(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"));
      }
    })
  });

})

＆＃13;

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

＆＃13;

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

希望这有帮助！

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

1 个答案: