jQuery .css不添加display：block; 对于所有div

Question

嗨，jQuery脚本不会为所有相同的鬃毛div添加显示块，仅为第一个添加。

JS

$("#sidecontrol_container").mouseenter(function(){
    setTimeout( function(){
    $('#packet_name').css('display','block');
       },310);
$( "#sidecontrol_container" ).animate({
        width:"230px"
    }, 300 );       
});
$("#sidecontrol_container").mouseleave(function(){
    $('#packet_name').css('display','none');
    $( "#sidecontrol_container" ).animate({
        width:"40px"
    }, 300 );   
});

HTML

<div id="sc_wraper">
    <div id="packet_name">1</div>
</div>

<div id="sc_wraper">
    <div id="packet_name">1</div>
</div>

CSS

#packet_name{
    height:40px;
    width:190px;
    float:right;
    display:none;
}

它仅在名称为packet_name <div id="packet_name" style="display:block;">1</div>第一个div中添加

mouseenter之后的HTML结果

<div id="sc_wraper">
        <div id="packet_name" style="display:block;">1</div>
    </div>

    <div id="sc_wraper">
        <div id="packet_name">1</div>
    </div>

Answer 1

之所以只更改第一个实例，是因为jQuery仅选择div名称的第一个实例，因为它是一个ID。

如果要更改相同名称的多个div，则需要使用div类代替它们的名称。 一旦更新了HTML以使用类名，请对jQuery进行同样的操作，它应该可以工作