如何将 Javascript 函数应用于所有 Tumblr 帖子，而不仅仅是最近的帖子？答案

【问题标题】：How does one apply a Javascript function to all Tumblr posts and not just the most recent one?如何将 Javascript 函数应用于所有 Tumblr 帖子，而不仅仅是最近的帖子？
【发布时间】：2013-12-21 05:03:57
【问题描述】：

我一直在研究一个 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，并且 ID 必须是唯一的。您的代码中没有处理多个元素的循环。
你能显示扩展模板的 HTML 吗？
我假设 Post 块中集成了一个循环，允许它应用一组代码，而不是为每个条目编写一个新的代码块，但也许它仍然需要一个循环。另外，您希望我将其扩展到哪里？
它会做一个循环。但是循环的每次迭代中的 Javascript 都在处理相同的元素，而不是来自该迭代的元素，因为您通过 ID 访问它们。 ID 在整个文档中应该是唯一的，它们与循环的当前迭代无关。
而且看起来你的 Javascript 不在块内，所以它不会在循环中。

标签： javascript tumblr

【解决方案1】：

我认为这可以做到。

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

【讨论】：

【解决方案2】：

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

如果您不关心支持较旧的浏览器，那么querySelectorAll 与类名相结合应该可以解决这个问题。如果您确实希望支持旧版浏览器，您可能需要回复 getElementsByName，然后遍历 DOM 以获取您要编辑的节点。

如果这对您来说非常有用，我建议您开始使用 jQuery 等 javascript 库，因为这些库使操作 DOM 变得更加容易。

【讨论】：