javascript - この JavaScript を異なるターゲットで複数回実行したい

Question

あまり意味のないタイトルで申し訳ありません。これをどのように説明すればよいかわかりません。提案をいただければ幸いです。

Squarespace が Web ページの各ブログ投稿のフッターと、ブログ エントリの個々のページのフッターに挿入するこのスクリプトがあります。個々のページに読み込まれると、コードは正常に実行されます。ただし、ブログ エントリごとに 1 回読み込まれる Web ページでは、少し面倒です。

これはコードです：

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

ブラウザーがコード インジェクションを読み取るときに、個々の記事ページが 1 行ずつ表示されるのは、スクリプトが意図したとおりに実行されるためだと思います。

ただし、ブログの概要ページでは Squarespace が記事ごとに 1 回コードを挿入しているため、それが問題の原因であると思います。<a class="entry-comments">コードは 3 回、4 回、5 回実行され、実行ごとに .getJSON 関数の結果がセクションの先頭に追加されます。最終的には次のようになります。

「1 コメント」は 3 回繰り返されます (ページのブログ エントリごとに 1 回)。<a>さらに、これらの各要素の HREFは同じ URLvar 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;
}

これはページのフッターに挿入されるため、ロジックはインデックスと個々の投稿の両方で機能するはずです (記事の項目が 1 つしかないため、記事のループは 1 回だけ繰り返されます)。

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：

それらにアクセスできないように聞こえるので、代わりにこのソリューションが機能し、1 回または 10 億回埋め込まれても機能するはずです。詳細については、コードのコメントを確認してください。

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