Question

我正在为使用第三方平台的客户工作，该平台只允许我覆盖CSS并部分编辑HTML模板。我也可以通过添加Javascript来进行更改，在这个实例中，我需要根据缩略图的尺寸附加类和ID，在list-items中表示为图像。我已经开始了一个小提琴，用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不能在li = 0
您只访问了li

ul

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');
  }
});

DEMO - 结合以上所有

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

id

关于ID与班级的旁注
如果你打算有几个这样的您可能希望将这些值转换为相同.addClass("fill-landscape")值的元素而不是类，attr("id", "fill-landscape")而不是id。 id值必须是唯一的。这将是无效的 HTML和jQuery选择器也只匹配第一个匹配的#fill-landscape和不会退回收藏品。当然，这意味着您必须同时更新CSS .fill-landscape到.fill-portrait { background:#333; } .fill-landscape { background:#888; }。

DEMO - 仅使用类而不是ID

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

.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'); } });）：

{{1}}

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/

根据图像尺寸添加属性

2 个答案: