根据图像尺寸添加属性

Question

我正在为使用第三方平台的客户工作，该平台只允许我覆盖 CSS 并部分编辑 HTML 模板。我还可以通过添加 Javascript 来进行更改，在这种情况下，我需要根据缩略图图像的尺寸附加类和 ID，在列表项中表示为图像。我开始了一个小提琴，用 div 替换图像。

http://jsfiddle.net/dbudell/SYTsP/4/

这是 HTML：

<ul>
  <li><div class="item item1"></div></li>
  <li><div class="item item2"></div></li>
</ul>

还有 CSS。如您所见，我已将 .item1 设置为“纵向”尺寸，将 .item2 设置为“横向”尺寸。我想根据这些尺寸附加到 ID：

li {
   display:inline-block;
   margin:5px;
}

.item1, .item2 {
  border:1px solid #333;
}

.item1 {
   width:100px;
   height:200px;
}

.item2 {
    width:200px;
    height:100px;
}

#fill-portrait {
  background:#333;
}

#fill-landscape {
  background:#888;
}

这里是 JQuery 代码，它在语法上似乎是正确的，但没有产生任何结果。不知道是什么问题。

var itemWidth = $('.item').width();
var itemHeight = $('.item').height();

if (itemWidth > itemheight) {
  $('.item', this).addAttr('id','fill-landscape');
} else {
  $('.item', this).addAttr('id','fill-portrait');
}

同样，指向小提琴的链接是http://jsfiddle.net/dbudell/SYTsP/4/。

Answer 1

有几处看起来不正确：

• 当前代码中的错字itemheight 应该是itemHeight
• addAttr("id, "value") 应该是 attr("id", "value")
• this 在您的选择器中 $("li", this) 是指 window 不能在这样的选择器中使用 $("li", this).length = 0
• 您只访问遇到的第一个li，而不是ul 中的所有li 元素

---

DEMO - 结合以上所有内容

---

我在上面的 DEMO 和下面的脚本中使用了你现有的 HTML 和 CSS：

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.attr('id', 'fill-landscape');
  } else {
    $item.attr('id', 'fill-portrait');
  }
});

---

关于 id 与 class 的旁注
如果您打算拥有其中的几个 使用相同 id 值的元素，您可能希望将其切换为 类代替，即：.addClass("fill-landscape") 而不是 attr("id", "fill-landscape")。 id 值必须是唯一的。这将是无效的 HTML 和 jQuery 选择器也只匹配第一个匹配的 id 和 不会返回集合。当然，这意味着您还必须将 CSS 从 #fill-landscape 更新为 .fill-landscape。

---

DEMO - 使用类而不是 id 以防万一

---

上面的 DEMO 使用了以下更改的 CSS（#fill-x 现在是 .fill-x）：

.fill-portrait {
  background:#333;
}
.fill-landscape {
  background:#888;
}

更改的脚本（使用.addClass() 而不是.attr()）：

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.addClass('fill-landscape');
  } else {
    $item.addClass('fill-portrait');
  }
});

Answer 2

您需要选择要获取其尺寸的各个元素。否则，您的 $('li') 选择器正在选择页面上的每个“li”元素。例如：

$('.item1').height();

然后你可以添加一个id如下：

$('.item1').attr('id', 'blah');

一个明确的例子http://jsfiddle.net/SYTsP/7/：

var $item1 = $('.item1');
var $item2 = $('.item2');

setId($item1);
setId($item2);

function setId($item){
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.parent('li').attr('id','fill-landscape');
  } else {
    $item.parent('li').attr('id','fill-portrait');
  }
}

现在有更多的迭代！！

http://jsfiddle.net/SYTsP/9/