1

我有这个标记:

<div class="container">
   <figure></figure>   
   <figure></figure>
   <figure></figure>
</div>

现在:我需要为每个figures对称元素添加,但具有不同的高度和宽度值。对于接下来的每个项目,我需要删除大约 10% 的宽度和高度。所以第一个有 90%,第二个 80%,第三个有 70% 的初始大小。我正在使用以下代码,但它不起作用,有人可以帮忙吗?

var inside_element = $(figure);
var indx = 10;
inside_element.each(function(indx){
    $(this).css({
        width: '90%' - indx,
        height: '90%' - indx
    });
});

谢谢。

4

4 回答 4

6

您处理字符串 '90%' 并尝试完成数学运算,这将下降。这应该有效:

var inside_element = $('figure');
var indx = 10;
inside_element.each(function(indx){
    $(this).css({
        width: (90 - (10*indx)) + '%' ,
        height: (90 - (10*indx)) + '%'
    });
});

var indx = 10;也不需要声明。该值将在函数内部被覆盖。

编辑:也可以有更多的容器。然后代码应如下所示:

var inside_container = $('.inside_container');
    inside_container.each( function(i) {
    var inside_element = $(this).find('figure');
    var step = 10;
    inside_element.each(function(indx){
        $(this).css({
            width: (90 - (step*indx)) + '%' ,
            height: (90 - (step*indx)) + '%'
        });
    });
});
于 2013-05-16T11:30:54.690 回答
1

你没有选择figure你需要这个$('figure');

var inside_element = $('figure');
inside_element.each(function(index){
    $(this).css({
        width: (90 - index * 10) +"%",
        height:(90 - index * 10) +"%"
    });
});
于 2013-05-16T11:33:07.810 回答
1

indx您正在通过从字符串中减去来计算下一个宽度和高度。

尝试:

var width = 100;
var height = 100;
inside_element.each(function(indx){
    width = width - 10;
    height = height - 10;
    $(this).css({
        width: width + '%',
        height: height + '%'
    });
});
于 2013-05-16T11:33:12.150 回答
1

尝试这个:

var inside_element = $('figure');
var width = '90',
    height = '90';

inside_element.each(function(indx){
    $(this).css({
        width: width + '%',
        height: height + '%'
    });
    width = width - 10;
    height = height - 10;
});
于 2013-05-16T11:33:29.900 回答