如何将Javascript函数应用于所有Tumblr文章，而不仅仅是最近的一篇？

我一直在研究Tumblr主题，一个问题是大多数帖子都是照片。每种类型的帖子都有一个已定义的包装颜色，照片帖子是粉红色的，但我想让照片帖子更加多样化，所以我实现了一些Javascript，它将获取照片帖子上标题的长度，并使用该长度定义包装的颜色。我基于标题长度，因为我希望它在每篇文章上的作用会不同，而且是分开的，因为在我以前使用Math.random编写的函数中有一个问题。但现在它只对最近的帖子起作用。您认为如何更改代码，使该函数应用于页面上的每个照片帖子

以下是引用的html：

{block:Photo}
  <li class="post photo">
    <div class="content">
      <div name="photowrap" id="photowrap" 
       style="width: 330px;
       background-color: #F6CEE3;
       padding: 1.2em 15px;
       margin: 0 auto;
       border: 3px white solid;
       border-radius: 20px;">
        <center><img src="{PhotoUrl-500}" alt="{PhotoAlt}"/></center>

          {block:Caption}
            <h4><div class="caption" id="phocap">{Caption}</div></h4>
          {/block:Caption}

            <center><div class="notes"><a href="{ReblogURL}" title="Reblog"><img src="http://www.zomm.com/blog/wp-content/uploads/2011/11/recycle-2.jpg"></a><a href="{Permalink}"><img src="http://exchangedownloads.smarttech.com/public/content/0d/0d14fcdc-8db0-4272-b1d0-be30b37bd147/previews/medium/0001.png">{PostNotes}</a></div></center>


      </div>
    </div>
  </li>
{/block:Photo}

下面是Javascript：

<script type="text/javascript">

        var wrapCol = document.getElementById("photowrap");
        var captionnum = document.getElementById("phocap").innerHTML.length;
        if (captionnum == 0)
          wrapCol.style.backgroundColor="#F6CEE3";
        if (captionnum > 0 && captionnum < 50)
          wrapCol.style.backgroundColor="#A7EAFF";
        if (captionnum >= 50)
          wrapCol.style.backgroundColor="#CEF6A3";

</script> 

根据定义，id属性是唯一的，因为代码使用document，所以我只能假设在设置页面样式之前将块添加到页面中。 您需要将对document.getElementById的调用替换为能够一次选择多个节点并返回节点列表供您循环的调用

如果您不关心支持较旧的浏览器，那么querySelectorAll和类名组合应该可以实现这一点。 如果您确实希望支持较旧的浏览器，则可能需要在getElementsByName上回复，然后遍历DOM以到达您希望编辑的节点

---

如果您需要做很多工作，我建议您开始使用诸如jQuery之类的javascript库，因为这些库使操作DOM变得更加容易。

我认为这可能会做到

var wrapCols = document.getElementsByName('photowrap');
for (var i = 0; i < wrapCols.length; i++) {
    var wrapCol = wrapCols[i];
    var captionnum = wrapCol.getElementsByClassName("caption")[0].innerHTML.length;
    if (captionnum == 0) {
      wrapCol.style.backgroundColor="#F6CEE3";
    } else if (captionnum < 50) {
      wrapCol.style.backgroundColor="#A7EAFF";
    } else {
      wrapCol.style.backgroundColor="#CEF6A3";
    }
}

---

该代码如何在多个帖子上运行？您只是查找ID，ID必须是唯一的。你的代码中没有循环来处理多个元素。你能用扩展的模板显示HTML吗？我假设Post块中集成了一个循环，允许它应用一组代码，而不是为每个条目编写一个新的代码块，但可能它仍然需要一个循环。还有，你想让我把它扩展到哪里？它会做一个循环。但是循环的每个迭代中的Javascript都在处理相同的元素，而不是该迭代中的元素，因为您是通过ID访问它们的。ID在整个文档中应该是唯一的，它们与循环的当前迭代无关。而且您的Javascript看起来不在块内，所以它不会在循环中。