根据图像尺寸添加属性

我正在为使用第三方平台的客户端工作，该平台只允许我覆盖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/。

来源

2013-01-11 Daniel Bogre Udell

源代码中存在拼写错误：'itemheight' =>'itemHeight'。在你解决这个问题之后，请看Joeltine的答案。 –

此外，重复的ID是一个非常糟糕的主意。 –

为什么你想在你已经拥有课程时追加ID？ –

你需要选择你想要的单个元素得到的尺寸。否则，你是$（'li'）选择器是sele给页面上的每个“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/

来源

2013-01-11 23:03:43 joeltine

hm我添加了一个普通类“item”，并试图补充说，但是它似乎并没有产生积极的结果:(谢谢 –

代码示例应该显示如何遍历匹配的元素，你只附加一个ID到一个特定类的元素 –

看看这个小提琴的答案：http://jsfiddle.net/SYTsP/7/ – joeltine

有几件事情是不看的权利：

错字在当前的代码itemheight应该是itemHeight
addAttr("id, "value")应该attr("id", "value")
this在您选择$("li", this)是指window哪些不能用在选择器里E该作为$("li", this).length = 0
你只访问你遇到第一li并且不是所有li元件在ul

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 VS类

侧面说明
如果您计划在具有几个使用相同id值的那些元素，你可能想切换那些类代替，即： .addClass("fill-landscape")而不是attr("id", "fill-landscape")。 id值必须是唯一的。这将是无效的 HTML和jQuery选择器也只匹配第一个匹配的id和不会返回一个集合。当然，这意味着你必须更新你的CSS以及从#fill-landscape到.fill-landscape。

DEMO - 只是在例使用类代替IDS

上面DEMO使用了以下改变的CSS（＃填充-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'); 
    } 
});

来源

2013-01-11 23:17:44 Nope

根据图像尺寸添加属性

回答

相关问题