Question

我正在尝试将数据属性的高度应用到div上，这仅适用于第一个，因为第二个div从第一个元素获得相同的高度。有没有人知道解决这个问题的方法我是否需要将其作为每个函数运行？例如？

var $elements = {
   button: $('.js-show-more'),
   container: $('.js-readmore-container'),
   blockheight: $('.js-block-height')
};


var maxheight = $elements.container.height();
var height = $elements.blockheight.data('height');

if (maxheight > 5) {
   $elements.blockheight.css("height", height);
}

Answer 1

您可以像这样使用.css(prop, callback)：

$elements.blockheight.css("height", function(){
    return $(this).data('height') //return the current elements data attribute value.
});

Fiddle

Answer 2

使用：

$elements.blockheight.height(height);

Answer 3

您需要迭代并设置

var $elements = {
    button: $('.js-show-more'),
    container: $('.js-readmore-container')
};

$elements.container.height(function (i, height) {
    var bheight = $(this).find('.js-block-height').data('height');
    return bheight < height ? bheight : height
})

演示：Fiddle

Answer 4

使用类ActivityTwo简单地获取所有元素并迭代：

js-block-height

小提琴：https://jsfiddle.net/y45rgsza/5/

Answer 5

使用每个函数检查每个容器以获取数据属性并应用于blockheight内。

这是新的工作代码，

var $elements = {
button: $('.js-show-more'),
container: $('.js-readmore-container'),
blockheight: $('.js-block-height')};
$($elements.container).each(function(){
var maxheight = $(this).height();
var height = $(this).find($elements.blockheight).data('height');
if (maxheight > 5) {
$(this).find($elements.blockheight).css("height", height);
}});

https://jsfiddle.net/y45rgsza/6/

jQuery从数据属性应用高度

5 个答案:

Fiddle