jQuery加载返回“undefined”url

Question

我目前正在一个Wordpress网站的画廊页面上点击画廊链接，通过jQuery load()函数从固定链接中获取图片。

然而，虽然反复点击所有图库链接，但仍会有图像无法加载的时间，即使其他尝试都会成功。当我查看控制台时，发现下面的jQuery函数中的某处可能在url中返回了“undefined”，导致404错误。

HTML：

<article class="post"> 
    <a href="#" data-href="<?php the_permalink(); ?>" class="meta"> 
    <p> 
     <span class="category"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> 
     <span class="title"><?php echo get_the_title(); ?></span> 
    </p> 
    </a> 
</article> 

JS：

$("#gallery").fadeIn(function() { 
    var permalink = $(event.target).attr("data-href"); 

    $(this).append("<div class='slides'></div>") 
    $("#gallery .slides").delay(1000).load(permalink + " img", function() { 

     $("#gallery .slides img").wrap("<div class='slide'></div>"); 

     $(".slide").each(function() { 
      var src = $(this).find("img").attr("src"); 
      $(this).css({ 
       "background": "url(" + src + ")" 
      }); 
      $(this).empty(); 
     }); 

     $('.slides').anyslider(); 

    }); 
}); 

现场演示： trivecs.com/work

截图： 个

Answer 1

永久链接是未定义的，因为它是在#gallery淡入事件的范围，外移动它，你会得到任何的烦恼：

$(document).on('click', ".page-id-5 .post .meta", function(event) { 
var permalink = $(this).data("href"); // move it here 
$("#gallery").fadeIn(function() { 
    //var permalink = $(event.target).attr("data-href"); 

Answer 2

问题

• event没有定义
• event.target可能不是你想要的元素。

解决方案

不要你想这样做的click事件，而不是一个a.meta链接？

$("a.meta").click(function() { 
    var permalink = $(this).attr("data-href"); 

    $('#gallery').append("<div class='slides'></div>") 
    $("#gallery .slides").delay(1000).load(permalink + " img", function() { 

     $("#gallery .slides img").wrap("<div class='slide'></div>"); 

     $(".slide").each(function() { 
      var src = $(this).find("img").attr("src"); 
      $(this).css({ 
       "background": "url(" + src + ")" 
      }); 
      $(this).empty(); 
     }); 

     $('.slides').anyslider(); 

    }); 
});