位置HREF收益为未定义

Question

我有这样的波及效应代码：

(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); 

这是动态使用WordPress的上市后：

<?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(); ?> 

出于某种原因，我越来越放在location.href为未定义。我也试过：

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

任何意见我在做什么错在这里？

Answer 1

this不参考锚点setTimeout，您可以将输出缓存到稍后可以使用的变量中。

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

或者，你也可以传递参数

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

你有可变self定义this到点击的元素，像这样：

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