Lage href kehrt als undefined

Question

Ich habe diese Ripple-Effekt Code:

(function (window, $) { 

    $(function() { 


    $('.ripple-white').on('click', function (event) { 
     event.preventDefault(); 

     var $div = $('<div/>'), 
      btnOffset = $(this).offset(), 
      xPos = event.pageX - btnOffset.left, 
      yPos = event.pageY - btnOffset.top; 



     $div.addClass('ripple-effect'); 
     var $ripple = $(".ripple-effect"); 

     $ripple.css("height", $(this).height()); 
     $ripple.css("width", $(this).height()); 
     $div 
     .css({ 
      top: yPos - ($ripple.height()/2), 
      left: xPos - ($ripple.width()/2), 
      background: $(this).data("ripple-color") 
     }) 
     .appendTo($(this)); 

     window.setTimeout(function(){ 
     $div.remove(); 
     location.href = $(this).attr('href'); 
     }, 800); 

    }); 

    }); 

})(window, jQuery); 

, die dynamisch für Wordpress Post-Eintrag verwendet wird:

<?php $the_query = new WP_Query('posts_per_page=50'); ?> 
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?> 
<div class="flex-3col"><a class="ripple-white" href="<?php the_permalink() ?>"><h3 class="single-menu"><?php the_title(); ?></h3></a></div> 
<?php endwhile; wp_reset_postdata(); ?> 

Aus irgendeinem Grund bin ich der location.href bekommen als NICHT DEFINIERT. Ich habe auch versucht:

$('a', this).attr("href"); 

Irgendwelche Ratschläge, was ich hier falsch mache?

Answer 1

this bezieht sich nicht auf Anker in setTimeout, Sie können die Ausgabe in einer Variablen zwischenspeichern, die später verwendet werden kann.

var href = $(this).attr('href'); //Cached the output 
window.setTimeout(function(){ 
    $div.remove(); 
    location.href = href ; 
}, 800); 

Oder können Sie Argument übergeben

window.setTimeout(function(href){ 
    $div.remove(); 
    location.href = href ; 
}, 800, $(this).attr('href')); 

window.setTimeout(function(href) { 
 
    console.log('href', href) 
 
}, 800, window.location.href);

Answer 2

Sie haben this in Variable self zu definieren Element geklickt wird, wie folgt aus:

(function (window, $) { 
 

 
    $(function() { 
 

 

 
    $('.ripple-white').on('click', function (event) { 
 
\t var self = this; 
 
     event.preventDefault(); 
 

 
     var $div = $('<div/>'), 
 
      btnOffset = $(this).offset(), 
 
      xPos = event.pageX - btnOffset.left, 
 
      yPos = event.pageY - btnOffset.top; 
 

 

 

 
     $div.addClass('ripple-effect'); 
 
     var $ripple = $(".ripple-effect"); 
 

 
     $ripple.css("height", $(this).height()); 
 
     $ripple.css("width", $(this).height()); 
 
     $div 
 
     .css({ 
 
      top: yPos - ($ripple.height()/2), 
 
      left: xPos - ($ripple.width()/2), 
 
      background: $(this).data("ripple-color") 
 
     }) 
 
     .appendTo($(this)); 
 

 
     window.setTimeout(function(){ 
 
     $div.remove(); 
 
     //location.href = $(this).attr('href'); 
 
\t \t $(".clicked_href").html($(self).attr('href')); 
 
     }, 800); 
 

 
    }); 
 

 
    }); 
 

 
})(window, jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="flex-3col"><a class="ripple-white" href="http://www11.com"><h3 class="single-menu">Link 1</h3></a></div> 
 
<div class="flex-3col"><a class="ripple-white" href="http://www22.com"><h3 class="single-menu">Link 2</h3></a></div> 
 
<div class="flex-3col"><a class="ripple-white" href="http://www33.com"><h3 class="single-menu">Link 3</h3></a></div> 
 

 
<div>Href: <span class="clicked_href"></span></div>