Luk*_*kas 1 javascript css jquery symmetric
我有这个标记:
<div class="container">
<figure></figure>
<figure></figure>
<figure></figure>
</div>
Run Code Online (Sandbox Code Playgroud)
现在:我需要为每个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
});
});
Run Code Online (Sandbox Code Playgroud)
谢谢.
您正在处理字符串'90%'并尝试完成数学运算,这将会下降.这应该工作:
var inside_element = $('figure');
var indx = 10;
inside_element.each(function(indx){
$(this).css({
width: (90 - (10*indx)) + '%' ,
height: (90 - (10*indx)) + '%'
});
});
Run Code Online (Sandbox Code Playgroud)
也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)) + '%'
});
});
});
Run Code Online (Sandbox Code Playgroud)