jQuery .css不會添加display：block;爲所有div

Question

嗨jQuery腳本不添加顯示塊的所有相同的鬃毛divs，只爲第一個。

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

只mouseen後<div id="packet_name" style="display:block;">1</div>

HTML結果和名稱packet_name增加了對第一個div ter

<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做同樣的事情，它應該可以工作