0

我很抱歉，但经过几个小时的尝试，我只需要问专家:)

我的 Tumblr 主题中有以下代码：

   {block:Photo}
   <li class="post photo"> 
   // Retrieving photo url here using {PhotoURL-500}.
   {/block:Photo}

这会检索所有照片帖子并将其显示在页面上。

现在我想给 li 一个类，这取决于图像方向。我已经使用以下方法检索了它：

<script type="text/javascript">

var width = {PhotoWidth-500}; // this is a Tumblr variable that gets the width
var height = {PhotoHeight-500}; // this is a Tumblr variable that gets the height

if (width > height) {
// Here I get stuck, I want to append class="horizontal" to the li above.
}
else {
// append class="vertical"
}
</script>

我确实必须在 {block:Photo} 中调用 javascript，否则我无法确定每张照片的单独高度和宽度。作为提醒；我很想在 PHP 中执行此操作并只是回显它，但 Tumblr 不允许这样做。我是一个JS菜鸟......

帮助将不胜感激！提前致谢！

4

1 回答 1

1

在任何现代浏览器上，您都可以使用querySelectorAll来获取NodeList与选择器匹配的元素，例如

var list = querySelectorAll(".post.photo");

...然后循环遍历它们附加到它们的className属性。例如：

var list = querySelectorAll(".post.photo"),
    index,
    node;

for (index = 0; index < list.length; ++index) {
    node = list[index];
    if (some_condition) {
        node.className += " theNewClassToAdd";
    }
}

如果您需要支持较旧的浏览器，getElementsByClassName它已经存在了很长时间（但我相信它只支持单个类的查询，因此您必须进行后处理以确保两个类都存在）。

或者为了获得最广泛的支持，通过使用像jQuery、YUI、Closure或其他任何一个这样的体面的库来利用其他人的工作。

于 2012-10-27T22:28:42.010 回答