文章/答案/技术大牛

发布

问位置href返回未定义的
EN

Stack Overflow用户

提问于 2017-06-05 09:56:31

回答 2查看 3.4K关注 0票数 0

我有一个波纹效应代码：

(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 post列表：

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

我在这里做错了什么有什么建议吗？

javascript

wordpress

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-05 09:59:23

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

票数 2

Stack Overflow用户

发布于 2017-06-05 10:03:43

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44366290

复制

相似问题

问位置href返回未定义的
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置href返回未定义的EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置href返回未定义的
EN