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

Question

I'd like to have a list of all authors of a Wordpress blog to be shown as random characters, which change on mouseover to real names. I'm quite new to JavaScript and the code I have here is based on Random Text On MouseOver And On MouseLeave Show The Real Text , as Amir was looking for almost the same thing as me, only the other way around.

I want a unique string of random characters for each name, and I know I shouldn't use the class attribute in order to do that, but how can I use id without having to list all the names manually?

Secondly, the random character string isn't showing up until you first mouseover the text because I use mouseenter , but what is the proper way to do this?

Thanks in advance!

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 (I just show everything):

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>'; 
}
?>

For testing the Javascript: http://jsfiddle.net/pqkdx1sn/1/#&togetherjs=4GUpxUpfvB

Answer 1

So yeah, first thing you want to do, as you don't want to have all your elements crashing, is realise that $().each() is your friend. If you have each of the elements to be blurred process themselves and handle their enter and leave events separately, you won't have the issue you do. Take a look at this:

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

The first thing I do is have EACH of the tagged elements store both the original text and the random text as date attributes on themselves. Then I immediately replace the original text with the random text. Then, when this particular element gets a mouse over/leave event, it grabs its own data attribute as needed.

Hope this helps!