Question

我一直在研究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>

Answer 1

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

如果您不关心支持旧浏览器，那么querySelectorAll结合类名称应该适用于此。如果您确实希望支持旧浏览器，则可能需要在getElementsByName上回复，然后遍历DOM以获取您要编辑的节点。

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

Answer 2

我认为这可能会这样做。

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

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

2 个答案: