jquery加入两个URL查询

Question

我必须与博客网站合作，根据查询不同标签的帖子来设置图库。 Blogger在任何网址标签查询中最多返回17个帖子，因此在为多标签（可选）图库编写（样式化）结果之前，我需要加入两个或更多个帖子。以下是目前为一个URL查询使用的函数。

function loadContent(elementTarget, sourceURL, sourceElement) {
    $("" + elementTarget + "").hide();
    $("" + elementTarget + "").empty();
    $("body").scrollTop(0);
    $("" + elementTarget + "").load("http://www.ndauthorservices.com" + sourceURL + "&by-date=true " + sourceElement + "");
    $("" + elementTarget + "").load($("" + elementTarget + "").fadeIn('slow'));
    $("" + elementTarget + "").ready(function () {
        Shadowbox.setup("a.coverpreview", {
            viewportPadding: 40
        })
    });
}

elementTarget是HTML元素，其中将显示和设置图库结果。

sourceURL是构建查询的子字符串;示例：'/search/?q=label:Adventure&max-results=75'

注意：max-results在增加返回结果时对Blogger无效。

sourceElement是包含URL查询/搜索返回结果的元素。

我需要附加第二组（可能是第三和第四组）结果（和查询），以便在每个标签的库中加入50以上。每个后续查询都会添加'＆amp; start = 17'，每次增加“17”。每个查询都需要获取'sourceElement'内容并将所有这些内容添加到'elementTarget'中。

在摆弄一些选项后，我有点难过。任何建议或建议都会有所帮助。这是当前功能库的URL（右键单击并在新选项卡/窗口中打开）。

http://www.ndauthorservices.com/p/gallery.html

Answer 1

您的功能有一些问题。我将讨论那些然后提出一个建议的答案，其中有一些建议应该是更好的代码以及我可以改变原始链接的假设。

首先逐行关闭您的功能评论：

function loadContent(elementTarget, sourceURL, sourceElement) {
    $("" + elementTarget + "").hide();// do not need the double quotes

    $("" + elementTarget + "").empty();// do not need to "search the DOM again
    // new lines for above:
    var mytarget = $(elementTarget);// cache the initial
    mytarget.hide().empty();
    $("body").scrollTop(0);
    mytarget.load("http://www.ndauthorservices.com" + sourceURL + "&by-date=true " + sourceElement);// did not need the last `+ ""` here
    // load again? no $("" + elementTarget + "").load($("" + elementTarget + "").fadeIn('slow'));
    mytarget.fadeIn('slow');//but the next part?  box after fadeIn?
    mytarget.ready(function () {
        Shadowbox.setup("a.coverpreview", {
            viewportPadding: 40
        })
    });
    // this change assumes you want to do it this way after the fadIn completes?
    // use a callback instead
    mytarget.fadeIn('slow', function () {
        Shadowbox.setup("a.coverpreview", {
            viewportPadding: 40
        });
    });
}

编辑：您的功能已更新：

function loadContent(elementTarget, sourceURL, sourceElement) {
    var mytarget = $(elementTarget); // cache the initial
    mytarget.hide().empty();
    $("body").scrollTop(0);
    mytarget.load("http://www.ndauthorservices.com" + sourceURL + "&by-date=true " + sourceElement);
    mytarget.fadeIn('slow', function () {
        Shadowbox.setup("a.coverpreview", {
            viewportPadding: 40
        });
    });
}

现在，我建议的解决方案。首先，我说明问题，以确保我明确：

1. 当用户点击＆＃34;输入＆＃34;我们加载＆＃34;覆盖＆＃34;第17页，最多为给定类型的50。
2. 当用户点击其他类型时，我们会重新开始使用该类型，并一次最多加载50个。
3. 我们可以将链接标记更改为不包含嵌入式JavaScript。
4. 我们可以更改链接标记以添加一些＆＃34;数据＆＃34;属性并使用它们。

为链接建议新标记（一个作为示例）：

<div><a class="actionlink" href="#" data-store='#storeContainer' data-load="empty" data-loadtype="Literary" data-search='/search/?q=label:Covers-Literary|label:Literary&max-results=75' data-list='#list-main'>Literary</a>
</div>

在某处添加此标记:(我们将其用于＆＃34;加载＆＃34;块）

<div id="tempholder"></div>

代码：将其放入文档就绪函数

修改 我做了一些调整（我的快速代码有一些问题）并创建了一个模拟，所以你可以看到它工作。在我的模拟中，我使用了一些样本数据，而不是“＃34; load＆＃34;但是你可以看到效果。在此处查看：http://jsfiddle.net/MarkSchultheiss/hexyLvwm/6/

我使用了它，然后删除了注释并更新到这里应该是什么实际代码（没有注释，没有模拟）：

编辑：更新的代码：

var lastLoaded = "";
var loadIncrement = 17;
var loadMaxCount = 50;
var loadCount = 0;
var tempHolder = $('#tempholder');
tempHolder.hide();  
function loadContent(elementTarget, sourceURL, sourceElement, me) {
    var displaytarget = $(elementTarget);
    displaytarget.hide();
    $("body").scrollTop(0);
    var loadedElements = {};
    var useThese = {};
    var loadedElementsCount = 0;
    var urlRoot = "http://www.ndauthorservices.com" + sourceURL + "&by-date=true";
    var startpoint = '&start=';
    tempHolder.empty();
    if (lastLoaded != $(me).data('loadtype')) {
        lastLoaded = $(me).data('loadtype');
        loadCount = 0;
        displaytarget.empty()
        tempHolder.data("load", "empty");
    }

    if (loadCount && loadCount < loadMaxCount) {
        startpoint = '&start=' + loadCount;
    } else {
        startpoint = " ";
    }
    tempHolder.load(urlRoot + startpoint + sourceElement);
    loadedElements = tempHolder.find(sourceElement).children('.post-start.row');
    loadedElementsCount = loadedElements.length;
    if ((loadedElementsCount + loadCount) > loadMaxCount) {
        loadedElementsCount = loadMaxCount - loadCount;
        tempHolder.data("load", "loadcomplete");
    }
    loadCount = loadCount + loadedElementsCount;
    if (displaytarget.find(sourceElement).length) {
        useThese = tempHolder.find(sourceElement).children('.post-start.row').slice(0, loadedElementsCount);
        displaytarget.find(sourceElement).append(useThese);
    } else {
        useThese = tempHolder.find(sourceElement);
        displaytarget.append(useThese);
    }
    tempHolder.empty();
}

$('#fullcontentcontainer').on('click', '.actionlink', function (event) {
    event.stopPropagation();
    event.stopImmediatePropagation();
    var me = $(this);
    tempHolder.data("load", "empty");
    do {
        loadContent(me.data('store'), me.data('search'), me.data('list'), me);
    }
    while (tempHolder.data('load') != "loadcomplete" && loadCount !== 0);
    $(me.data('store')).fadeIn('slow', function () {
        Shadowbox.setup("a.coverpreview", {
            viewportPadding: 40
          });
    });
    tempHolder.data("load", "empty");
});

编辑：使用$get 剪辑不将新数据放入DOM并使用除.load之外的其他方法只需替换代码中的函数：

function loadContent(elementTarget, sourceURL, sourceElement, me) {
    var displaytarget = $(elementTarget);
    displaytarget.hide();
    $("body").scrollTop(0);
    var loadedElements = {};
    var useThese = {};
    var loadedElementsCount = 0;
    var urlRoot = "http://www.ndauthorservices.com" + sourceURL + "&by-date=true";
    var startpoint = '&start=';
    if (lastLoaded != $(me).data('loadtype')) {
        lastLoaded = $(me).data('loadtype');
        loadCount = 0;
        displaytarget.empty();
        tempHolder.data("load", "empty");
    }
    if (loadCount && loadCount < loadMaxCount) {
        startpoint = '&start=' + loadCount;
    } else {
        startpoint = " ";
    }
    var $elemR = {};
    $.get(urlRoot + startpoint, function (data) {
        var $elem = $('<div>').html(data);
        $elemR = $elem.find(sourceElement);
    });
    loadedElements = $elemR.find(sourceElement).children('.post-start.row');
    loadedElementsCount = loadedElements.length;
    if ((loadedElementsCount + loadCount) > loadMaxCount) {
        loadedElementsCount = loadMaxCount - loadCount;
        tempHolder.data("load", "loadcomplete");
    }
    loadCount = loadCount + loadedElementsCount;
    if (displaytarget.find(sourceElement).length) {
        useThese = $elemR.find(sourceElement).children('.post-start.row').slice(0, loadedElementsCount);
        displaytarget.find(sourceElement).append(useThese);
    } else {
        useThese = $elemR.find(sourceElement);
        displaytarget.append(useThese);
    }
}