Question

我将此设置为使用左侧DIV中的两个链接将文件加载到DIV中，但每次有新链接时它都需要相同JQuery代码的唯一副本。

是否有办法通过某种变量将被调用的文件和被调用的DIV连接到链接，以便代码只能包含一次？

$(function() {
$(".link1").click(function() {
    $(".load_space").load("helloworld.txt", function() {
        //Insert contents of file wherever
        $(".block1").stop(true, true).animate({ left: -400 }, 200);
        $(".block2").stop(true, true).animate({ left: 25 }, 200);
    });
});

$(".link2").click(function() {
    $(".load_space").load("hellouniverse.txt", function() {
        //Insert contents of file wherever
        $(".block1").stop(true, true).animate({ left: -400 }, 200);
        $(".block2").stop(true, true).animate({ left: 25 }, 200);
    });
});

$(".link3").click(function() {
    $(".block2").stop(true, true).animate({ left: 450 }, 200);
    $(".block1").stop(true, true).animate({ left: 25 }, 200);
});
});

Answer 1

您可以定义一次功能

var load_fct = function() {
    //Insert contents of file wherever
    $(".block1").stop(true, true).animate({ left: -400 }, 200);
    $(".block2").stop(true, true).animate({ left: 25 }, 200);
}

并在需要的地方重复使用：

$(".link1").click(function() {
    $(".load_space").load("helloworld.txt", load_fct);
});

Answer 2

有两种方法。

在代码中使用地图。

您的代码中可以有一张地图，告诉您link1 =＆gt; helloworld.txt和link2 =＆gt; hellouniverse.txt，就像这样：

var map = {
    link1: "helloworld.txt",
    link2: "hellouniverse.txt"
};

然后：

$(".link1, .link2").click(function() {
    var file = map[this.className]; // <=== Assumption here, see below
    $(".load_space").load(file, function() {
        //Insert contents of file wherever
        $(".block1").stop(true, true).animate({ left: -400 }, 200);
        $(".block2").stop(true, true).animate({ left: 25 }, 200);
    });
});

这假定link1或link2类将是元素上的唯一类。如果情况不是这样，您可能需要先按一下className，然后再使用它来查找文件。

使用data-* attributes。

为data-file元素添加link属性，例如：

<div class="link1" data-file="helloworld.txt">...</div>

然后：

$(".link1, .link2").click(function() {
    var file = $(this).attr('data-file');
    $(".load_space").load(file, function() {
        //Insert contents of file wherever
        $(".block1").stop(true, true).animate({ left: -400 }, 200);
        $(".block2").stop(true, true).animate({ left: 25 }, 200);
    });
});

或者代替$(".link1, .link2")选择器，你可以使用$("*[data-file]")或更好，更有针对性的东西（因为在属性选择器上选择纯粹是有点的重）。因此对于具有$(".links[data-file]")属性的类“链接”的任何元素，也许data-file。

链接以将外部内容加载到DIV中

2 个答案: