jQuery激活器不适用于多个DIV

jQuery activator not working on multiple DIVs

本文关键字：DIV 适用于 不适用 激活 jQuery      更新时间：2023-12-21

因此，我正在进行一个设置，当我单击id为"sbox"的div之一时，它将使id为"box"的div展开并更改不透明度，这就是我的jQuery，

$(document).ready(function(){
  TriggerClick = 0;
  $("#sbox").click(function(){
    if(TriggerClick==0){
         TriggerClick=1;
         $("#box").animate({width:'100px', height:'100px', opacity: '0'}, 500);
    }else{
         TriggerClick=0;
         $("#box").animate({width:'500px', height: '500px', opacity: '1'}, 500);
    };
  });
});

现在，当我有多个id为"sbox"的div时，只有第一个框会做动画：

<div id="sbox">WORKS</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="box">This is the box that expands</div>

还有lastyl，我不确定这是否有帮助，但这是我的样式表：

#box {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0;
    position: fixed;
    left: 50%;
    right: 50%;
}
#sbox {
    background: blue;
    margin: 2px;
    display: inline-block;
    width: 50px;
    height: 50px;
}

如果你对我的代码有任何想法或建议，请尝试帮助。非常感谢。

-编辑-

我在这里的目标是获得一个方框阵列和一个更大的不可见方框，当你单击阵列中的一个方框时，大方框会展开并变为可见，当你点击同一方框时，它会缩小并变为不可见。

您不能为不同的元素分配相同的ID，请改用class。

css：

.sbox {
    background: blue;
    margin: 2px;
    display: inline-block;
    width: 50px;
    height: 50px;
}

&lt---css结束--->

$(document).ready(function(){
  TriggerClick = 0;
  $(".sbox").click(function(){
    if(TriggerClick==0){
         TriggerClick=1;
         $("#box").animate({width:'100px', height:'100px', opacity: '0'}, 500);
    }else{
         TriggerClick=0;
         $("#box").animate({width:'500px', height: '500px', opacity: '1'}, 500);
    };
  });
});
相关文章：