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

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 每篇文章都会注入一次代码，我认为这就是导致问题的原因。代码执行 3、4、5 次，并且 .getJSON 函数的结果被附加到<a class="entry-comments">每次执行的部分 - 最终发生的是：

违规网页截图

“1 条评论”重复 3 次（页面上的每个博客条目一次）。此外，这些<a>元素中的每一个的 HREF 都是相同的 URL，这向我表明，每个元素的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]

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

score 0 · Accepted Answer

您需要做的是向锚点添加一个唯一 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>

score 0 · Accepted Answer

你需要稍微改变一下你的逻辑。这主要是伪代码，但它的要点是：

编辑：有点hacky修复，但我现在想不出别的东西：

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

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

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

2 回答 2

Related

Reference