Javascript: Random text, on mouseover show real text

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

score 2 · Accepted Answer · answered Jan 05 '17 at 20:49

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!

Javascript: Random text, on mouseover show real text

1 Answers1