在循环中更改多个类名
Changing multiple class names in a loop
我在这个项目上张贴了我昨天正在做的工作,并设法找到了一种方法来获得我需要的大部分预期效果。我可能要走很长的路,但这就是我所拥有的和我所需要的。
这个设置为四个框,每个都从不同的z-index级别开始(40,60,80和100)#layer1在顶部。当点击最上面的盒子时,它会被移到后面,而其他三个盒子会被移到前面。当单击其他三个框中的一个时,它被向前移动,前面的框被向后推。我有。layer1,。layer2,。layer3和。layer4函数运行这个,它工作,但只有一次。之后,事情开始变得棘手。我已经尝试在changePos函数中通过层id查找每个框的当前z-index值,然后创建一个数组来保存这些值,然后循环将它们对应于我所拥有的索引值,但它不是正确的。
<script>
$(function() {
function changePos(){
var l1Index = $("#layer1").css('zIndex');
var l2Index = $("#layer2").css('zIndex');
var l3Index = $("#layer3").css('zIndex');
var l4Index = $("#layer4").css('zIndex');
var i;
var layerZindex = new Array();
layerZindex[1] = l1Index;
layerZindex[2] = l2Index;
layerZindex[3] = l3Index;
layerZindex[4] = l4Index;
for (i=1;i<4;i++)
{
if(layerZindex[i] == 40){
alert( "class layer" + i + "= 40, is now #layer4");
$("#layer4").removeClass();
$("#layer4").addClass("layer" + [i] + " zindex" + [i]);
}
else if(layerZindex[i] == 60){
alert( "layer" + i + "= 60, is now #layer3");
$("#layer3").removeClass();
$("#layer3").addClass("layer" + [i] + " zindex" + [i]);
}
else if(layerZindex[i] == 80){
alert( "layer" + i + "= 80, is now #layer2");
$("#layer2").removeClass();
$("#layer2").addClass("layer" + [i] + " zindex" + [i]);
}
else if(layerZindex[i] == 100){
alert( "layer" + i + "= 100, is now #layer1");
$("#layer1").removeClass();
$("#layer1").addClass("layer" + [i] + " zindex" + [i]);
}
}
}
$(".layer1").click(function() {
$(".layer1").animate({
opacity: "0.6",
left: "-120px",
top: "-90px",
zIndex: "40"
}, 850);
$(".layer2").animate({
opacity: "1",
left: "40px",
top: "30px",
zIndex: "100"
}, 550);
$(".layer3").animate({
opacity: "0.6",
left: "40px",
top: "30px",
zIndex: "80"
}, 700);
$(".layer4").animate({
opacity: "0.6",
left: "40px",
top: "30px",
zIndex: "60"
}, 850);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc2").animate({
opacity: "1"
}, 600);
changePos();
});
$(".layer2").click(function() {
$(".layer2").animate({
opacity: "1",
left: "40px",
top: "30px",
zIndex: "100"
}, 400);
$(".layer1").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "80"
}, 550);
$("Descriptions").animate({
opacity: "0"
}, 600);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc2").animate({
opacity: "1"
}, 600);
changePos();
});
$(".layer3").click(function() {
$(".layer3").animate({
opacity: "1",
left: "80px",
top: "60px",
zIndex: "100"
}, 400);
$(".layer1").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "80"
}, 400);
$(".layer2").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "60"
}, 550);
$("Descriptions").animate({
opacity: "0"
}, 600);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc3").animate({
opacity: "1"
}, 600);
changePos();
});
$(".layer4").click(function() {
$(".layer4").animate({
opacity: "1",
left: "120px",
top: "90px",
zIndex: "100"
}, 400);
$(".layer1").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "80"
}, 400);
$(".layer2").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "60"
}, 550);
$(".layer3").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "40"
}, 700);
$("Descriptions").animate({
opacity: "0"
}, 600);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc4").animate({
opacity: "1"
}, 600);
changePos();
});
});
</script>
Here is my html
<div id="sites">
<div id="layer1" class="layer1 zindex1">
</div>
<div id="layer2" class="layer2 zindex2">
</div>
<div id="layer3" class="layer3 zindex3">
</div>
<div id="layer4" class="layer4 zindex4">
</div>
</div>
在css中,#layer id当前驱动颜色,层类驱动大小,不透明度和定位类型(绝对),zindex类使用边距驱动位置。
我的问题是我需要在循环中运行这个,其中层类根据函数运行后哪个框最终具有最高的z-index重新发布。
还有,有没有更有效的方法来达到这个效果?
:更新我在这里的进展,它是如此接近。我还没有弄清楚是什么原因导致了这个问题,但行为似乎执行了原始的过渡,没有问题,但当我运行changePos时就挂了。它执行指定给顶部新框的函数,而不是将其重命名。在另一次单击时,它执行.layer1框的功能,然后在两者之间交替。changePos函数看起来确实在重命名类,但在某个地方混淆了。也许通过layerZindex数组?
通过外部资源,我得到了一些帮助。这就是我得到的。
function changePos() {
// References to the z-index levels, this makes our code shorter and more efficient
var levels = {40 : 4, 60 : 3, 80 : 2, 100 : 1};
var i = 1;
$('[id^=layer]').each(function() {
// Get the element z-index level
var zIndexLevel = $(this).css('zIndex');
// Set the respective element class
if (levels[zIndexLevel]) {
$('#layer' + i).attr('class', 'layer' + levels[zIndexLevel]);
$('#SiteDescriptions' + i).animate({opacity: "1"}, 500);
$('#SiteDescriptions' + !i).animate({opacity: "0"}, 500);
//alert( levels[zIndexLevel] + ":" + zIndexLevel);
i++;
}
});
希望这对任何可能有同样问题的人有所帮助
- jQuery:循环一个具有不同超时值的循环
- 在循环中分配json值时,值被覆盖
- 如何在下面的ES6循环中获得前面的文本
- 为什么“;未定义的“;在JavaScript中结束循环
- Javascript循环不会自我更新
- 如何使用jquery处理php循环通过元素
- 而循环只设置php中输入字段中的第一个值
- 循环遍历数组中的特定索引
- Javascript返回值只在循环中返回一次
- 按照选项卡索引的顺序循环一个jQuery选择
- 循环遍历以数组为值的Javascript对象
- 为什么JavaScript在for循环为3时向所有4发出警报
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 循环结束/推送到数组之前在页面上呈现EJS
- 循环比赛位置算法
- jQuery循环在特定位置暂停
- 我的javascript for循环不起作用
- 循环浏览多个身体背景图像
- W3C循环样式的JavaScript
- For循环冻结Javascript