Question

很多道歉的标题并没有多大意义;我不知道如何描述这个。建议将不胜感激。

我有这个脚本，Squarespace注入网页上每个博客帖子的页脚，以及博客条目的个人页面的页脚。当加载到单个页面中时，代码执行得很好。但是，在每个博客条目加载一次的网页上，事情会变得更加混乱。

这是代码：

  <a name="comments-outer-wrapper" />

  <a class="muut" href="https://muut.com/i/test/comments:test">Comments</a>

  <script>
    var mtitle = document.title.slice(0, -13);
    var mhref = $("article").attr("id").substring(8);
    var mcount = "//api.moot.it/postcounts?path=/test/comments:" + mhref;

      $.getJSON(mcount, function(json) {

      var results = $(".entry-actions");

      $.each(json, function(key, val) {
        results.prepend("<a class=\"entry-comments\" href=\"{permalink}#comments-outer-wrapper\" title=\"Comments\">" + val["size"] + " Comments</a>");
        });
      });

    $(".muut").attr( "href","https://muut.com/i/test/comments:" + mhref);
    $(".muut").attr( "title",mtitle);
  </script>

在浏览器读取代码注入时，逐行扫描单个文章页面会发生什么，脚本按预期执行。

但是，由于在博客摘要页面上，Squarespace会在PER文章中注入代码，我认为这是导致问题的原因。代码执行3,4,5次，并且.getJSON函数的结果在每次执行时被添加到<a class="entry-comments">部分 - 最终发生的是：

Screenshot of the offending webpage

＆＃34; 1评论＆＃34;重复三次（页面上每个博客条目一次）。此外，每个<a>元素的HREF都是相同的网址，这向我建议var mtitle，var mhref和var mcount每个都是一样的;每个实例之间的变量都没有被删除，刷新或未定义。

所以，在我的原始思想中，我认为正在发生的是：

[BLOG WEBPAGE]--[mtitle3]-[mhref3]-[mcount3]
       |
       |--[BLOG ARTICLE 1]--[SCRIPT]-[mtitle1]-[mhref1]-[mcount1]
       |   
       |--[BLOG ARTICLE 2]--[SCRIPT]-[mtitle2]-[mhref2]-[mcount2]
       |
       |--[BLOG ARTICLE 1]--[SCRIPT]-[mtitle3]-[mhref3]-[mcount3]

仅使用最后收集的变量。

我想要发生的是：

[BLOG WEBPAGE]
       |
       |
[MASTER SCRIPT]--[mtitleX]-[mhrefX]-[mcountX]
       |
       |--[BLOG ARTICLE 1]--[mtitle1]-[mhref1]-[mcount1]
       |   
       |--[BLOG ARTICLE 2]--[mtitle2]-[mhref2]-[mcount2]
       |
       |--[BLOG ARTICLE 1]--[mtitle3]-[mhref3]-[mcount3]

我希望这不会太长或太模糊。

Answer 1

你需要对你的逻辑进行一些改变。这主要是伪代码，但它的要点是：

编辑：有点蠢蠢的修复，但目前我无法想到别的事情：

if (!window.addedCommentLinks) {
    $('article').each(function() {
        var mtitle = $(this).find('h1').text();
        var mhref = $(this).attr("id").substring(8);
        var mcount = "//api.moot.it/postcounts?path=/test/comments:" + mhref;

        $.getJSON(mcount, function(json) {
            var results = $(this).find(".entry-actions");

            $.each(json, function(key, val) {
                results.prepend("<a class=\"entry-comments\" href=\"{permalink}#comments-outer-wrapper\" title=\"Comments\">" + val["size"] + " Comments</a>");
            });
        });

        $(this).find(".muut-comments").attr("href", "https://muut.com/i/test/comments:" + mhref);
        $(this).find(".muut-comments").attr("title", mtitle);
    });
    window.addedCommentLinks = true;
}

由于这是在页面的页脚处注入的，因此逻辑应该对索引和单个帖子都有效（文章循环只有一次迭代，因为那里只有一个文章项目。）

Answer 2

您需要做的是为锚添加唯一ID。我在上面看到有人指出你正在重复使用ID，所以你转而使用了一个类，但这不是正确的解决方案。

通常，解决方案是使用您使用的任何服务器语言为您插入。由于您使用的是squarespace，因此您无法直接访问该语言，但看起来您仍然可以选择。根据他们的标记参考页面，您可以使用以下内容在网页中嵌入帖子ID：{squarespace.page-id} - http://developers.squarespace.com/quick-reference/

所以在你的情况下，我相信你可以通过一些小的调整来实现工作代码：

  <a name="comments-outer-wrapper" />

  <a id="comments-link-{squarespace.page-id}" class="muut" href="https://muut.com/i/test/comments:test">Comments</a>

  <script>
    var mtitle = document.title.slice(0, -13);

    // This needs to be updated to point to a specific article, like $("article#
    var mhref = "{squarespace.page-id}";

    var mcount = "//api.moot.it/postcounts?path=/test/comments:" + mhref;

      $.getJSON(mcount, function(json) {

      var results = $("#article-{squarespace.page-id} .entry-actions");

      $.each(json, function(key, val) {
        results.prepend("<a class=\"entry-comments\" href=\"{permalink}#comments-outer-wrapper\" title=\"Comments\">" + val["size"] + " Comments</a>");
        });
      });

    $("#comments-link-{squarespace.page-id}").attr( "href","https://muut.com/i/test/comments:" + mhref);
    $("#comments-link-{squarespace.page-id}").attr( "title",mtitle);
  </script>

修改

快速审核显示它可能不是{squarespace.page-id}，它可能实际上是{item.id}或类似的内容 - http://jsont.squarespace.com/#Data-Tags。基本上，您需要使用每个帖子的唯一ID。

编辑2：

由于听起来你没有访问权限，所以这个解决方案应该可以解决，而且无论是嵌入一次还是十亿次都应该能够工作。查看代码注释以获取更多信息：

<script type="text/javascript"> // This checks to see if the code has already been run, and if not, sets the var // to ensure that it's run but not run again. It's important that it's // defined as a globally scoped variable. if(typeof(mut_comment_counts_initialized) == "undefined" || !mut_comment_counts_initialized){ //set globally scoped var to true to keep this from being set again var mut_comment_counts_initialized = true; //queue up a function to execute once the whole page is loaded $(function(){ //since the whole page is loaded, we can now loop through all the articles on the page at once $("article").each(function(){ //grab this and put it in a scoped var inside of this anonymous function var article = $(this); //grab the article id from the ID attribute var article_id = article.attr("id").replace("article-",""); //define the api url using the article id var api_url = "//api.moot.it/postcounts?path=/test/comments:" + article_id; //do a json request for the article $.getJSON(api_url, function(json) { //find entry actions inside of previously scope article var var entry_actions_container = $(article).find(".entry-actions"); //loop through each json result $.each(json, function(key, val) { //create new anchor to add to var new_anchor = $("<a></a>"); //add attrs and values to anchor new_anchor .addClass("entry-comments") //I'm not convinced this url is right, especially since you said you can't use tags .attr("href", "{permalink}#comments-outer-wrapper") //i think this is probably what it should be (happened right when i tested it) //.attr("href", "https://muut.com/i/test/comments:" + article_id) .attr("title", "Comments") .html(val["size"] + " Comments"); // add new anchor to container entry_actions_container.prepend(new_anchor); }); }); }); }); } </script>

我想用不同的目标多次执行这个javascript

2 个答案: