Question

我有这个Ripple效果代码：

(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视为UNDEFINED。我也试过了：

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

您必须在变量this中将self定义为点击元素，如下所示：

＆＃13;

(function (window, $) {

  $(function() {


    $('.ripple-white').on('click', function (event) {
	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');
		$(".clicked_href").html( $(self).attr('href') );
      }, 800);

    });

  });

})(window, jQuery);

＆＃13;

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

＆＃13;

location href返回undefined

2 个答案: