我想多次執行此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注入一次PER文章的代碼，我認爲這就是導致問題的原因。該代碼執行3，4，5倍，並從.getJSON函數的結果被預設於<a class="entry-comments">部每次執行 - 什麼結束意外事件發生的是：

「1個註釋」重複三次（頁面上的每個博客條目一次）。此外，這些<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] 

我希望這不是太長或含糊。

Answer 1

你需要做的是向錨點添加一個唯一的ID。我在上面看到有人指出你在重複使用ID，所以你轉而使用一個類，但這不是正確的解決方案。

通常情況下，解決方案將使用您使用的任何服務器語言爲您插入。由於您使用的是方形空間，因此您無法直接訪問該語言，但看起來您仍有選擇。根據他們的標籤引用頁面，則可以使用此嵌入到頁面的帖子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> 

Answer 2

你需要對你的邏輯做一點改變。 這主要是僞代碼，但它的要點是：

編輯：有點哈克修復，但我不能在此刻想起別的東西：

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

由於這是注入頁面的頁腳，邏輯應該既適用於索引，也適用於單獨的帖子（由於只有一篇文章項目，文章循環只會有一次迭代）。