javascript - 如何使用 jquery 添加对称值

Question

我有这个标记：

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

谢谢。

Answer 1

您处理字符串 '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)) + '%'
        });
    });
});

Answer 2

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

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

Answer 3

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

尝试：

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

Answer 4

尝试这个：

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