Question

我想要使用班级background-color更改所有div的所有Liregion2。我只想更改div背景颜色，而不是li。但是，我的代码只更改了一个div元素！我怎样才能影响所有这些呢？

这是我的HTML5代码：

<div class = "Liregion2" id = "LineBock1" style ="padding-bottom:3%;padding-left:10%;background-color:#ff9900"> 
 <li>
   <a href="#" id = "FirstLine" style="color:#fff;text-decoration: none" >1號線</a>
 </li>
</div>  
<div class = "Liregion2" id = "LineBock2" style ="padding-bottom:3%;padding-left:10%;">             
 <li>
   <a href="#" id = "SecondLine" style="color:#009999;text-decoration: none" >2號線</a>
 </li>
</div>  
<div class = "Liregion2" id = "LineBock3" style ="padding-bottom:3%;padding-left:10%;"> 
 <li>
   <a href="#" id = "ThirdLine" style="color:#ff3366;text-decoration: none" >3號線</a>
 </li>
</div>  
<div class = "Liregion2" id = "LineBock4" style = "padding-left:10%;">  
 <li>
  <a href="#" id = "ForthLine" style="color:#0066ff;text-decoration: none" >4號線</a>
 </li>
</div>

这是JQuery：

$('#FirstLine').click(function(){
    $('.Liregion2').each(function( index , element  ){
            $(element).css("background-color" , "transparent");
    });     
    event.stopPropagation(); 
});

Answer 1

你不需要遍历每个元素。试试这个，

$('#FirstLine').click(function(){
    $('.Liregion2').css("background-color" , "transparent");
    event.stopPropagation(); 
});

Answer 2

css方法在幕后迭代集合，不需要使用each循环。此外，您的标记无效，li元素应该是ul / ol元素的子元素。 div元素应替换为上述元素之一（虽然它不是语义标记。）

您似乎只想操纵父元素的css属性。如果是这种情况，您可以使用.closest()或.parent()方法：

// Do not miss the `event` object if you want to use it
$('.Liregion2 a').click(function(event) { 
    $(this).closest('.Liregion2').css("background-color" , "transparent");
    event.stopPropagation(); 
});

建议避免使用内联样式，这会使标记无法维护。您可以声明CSS类，并使用jQuery removeClass和addClass方法添加/删除它们。

Answer 3

不需要那么复杂的代码，.css()函数自己遍历元素并将CSS应用于所有元素。

$('#FirstLine').click(function() {
    $('.Liregion2').css("background-color" , "transparent");
});

Answer 4

试试这个：

$(document).on("click", "#FirstLine", function(){      
    $('.Liregion2').css("background-color" , "transparent");    
});

使用JQuery更改同一类中的所有元素的css样式

4 个答案: