Javascript 如何防止jQuery.load（）返回一个；“未定义”；网址？

我目前正在Wordpress网站的一个图库页面上工作，点击图库链接可以通过jQuery

load（）

函数从永久链接获取图像

然而，当一个接一个地重复点击所有的图片库链接时，有时图片根本无法加载，即使其他尝试都会成功。当我查看控制台时，我看到下面jQuery函数中的某个地方可能在url中返回了一个“未定义的”，从而导致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>

$("#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();

    });
});

JS:

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

$("#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();

    });
});

$（“#画廊”）.fadeIn（函数（）{
var permalink=$（event.target）.attr（“data href”）；
$（this.append（“”）
$（“#gallery.slides”）.delay（1000）.load（permalink+“img”，函数（）{
$（“#gallery.slides img”）.wrap（“”）；
$（“.slide”）。每个（函数（）{
var src=$（this.find（“img”）.attr（“src”）；
$（this.css）({
“背景”：“url（“+src+”）”
});
$（this.empty（）；
});
$（'.slides'）.anyslider（）；
});
});

现场演示：trivecs.com/work

屏幕截图：

问题

• 未定义事件

• 事件。目标可能不是您想要的元素

解决方案 你不想改为在点击事件的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();

    });
});

$（“a.meta”）。单击（函数（）{
var permalink=$（this.attr（“data href”）；
$（“#图库”）。附加（“”）
$（“#gallery.slides”）.delay（1000）.load（permalink+“img”，函数（）{
$（“#gallery.slides img”）.wrap（“”）；
$（“.slide”）。每个（函数（）{
var src=$（this.find（“img”）.attr（“src”）；
$（this.css）({
“背景”：“url（“+src+”）”
});
$（this.empty（）；
});
$（'.slides'）.anyslider（）；
});
});

Permalink未定义，因为它在“gallery fadeIn”事件的范围内，请将其移到外部，您将不会遇到任何问题：

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

---

html和js代码不匹配。是否始终填充数据href。您可以在那里执行console.log以进行检查。为什么要在加载函数中用空格将img添加到permalink。是否可以包含指向实时演示的链接？当我们可以看到问题在起作用时，可以更容易地识别问题。@FluffyKitten:使用链接更新。您有一个控制台错误

GEThttp://trivecs.com/wp-content/themes/Trivecs/js/anijs-min.js -404

最初尝试过，但当通过（动态加载）导航栏访问页面时，模式框没有按预期工作。