在啓用的按鈕上應用css JavaScript

Question

我有HTML頁面，其中div和按鈕從JavaScript動態生成，如下所示。

<div style="background: rgb(247, 247, 247);"> 
    <button class ="xyz" disabled="disabled">Button1</button> 
</div> 
<div style="background: rgb(247, 247, 247);"> 
    <button class ="xyz" disabled="disabled">Button2</button> 
</div> 
<div style="background: rgb(247, 247, 247);"> 
    <button class ="xyz">Button3</button> 
</div> 

我的要求是隻改變其中未禁用按鈕這是最後一個div的是，css(background color)覈實。我使用jQuery來做到這一點，但它正在改變上述所有div的css。請在jQuery或JavaScript中告訴我這個需求的解決方案。

$(".xyz").parent().css({ "background": "rgb(95, 49, 49)" }); 

Answer 1

Appply parent()前last()方法，你的情況是足夠的，它的工作原理：

$(".xyz").last().parent().css({ "background": "rgb(95, 49, 49)" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background: rgb(247, 247, 247);"> 
 
<button class ="xyz" disabled="disabled">Button1</button> 
 
</div> 
 
<div style="background: rgb(247, 247, 247);"> 
 
<button class ="xyz" disabled="disabled">Button2</button> 
 
</div> 
 
<div style="background: rgb(247, 247, 247);"> 
 
<button class ="xyz">Button3</button> 
 
</div> 
 
My requirement is to change the css(background color) of that div only in which Button is not disabled which is last div. I'm using jquery to do this but it is changing css for all the divs above. Please tell me the solution for this requirement in jquery or javascript.

Answer 2

希望這有助於。這會將樣式應用於啓用按鈕的所有div。

選擇器是button:enabled。

$(function(){ 
    $("button:enabled").parent().css({ "background": "rgb(95, 49, 49)" }); 
}); 

Answer 3

工作小提琴：https://jsfiddle.net/hvo5fnt1/

更改JS：

$(".xyz").last().css({ "background": "rgb(95, 49, 49)" }); 

Answer 4

請參閱this小提琴 我已經在你的代碼下面的jQuery補充說：

$(".xyz:not(:disabled)").parent().css({ "background": "rgb(95, 49, 49)" });

Answer 5

你應該使用和:not()組合:disabled

:not(:disabled)

$(".xyz:not(:disabled)").parent().css({ "background": "rgb(95, 49, 49)" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background: rgb(247, 247, 247);"> 
 
    <button class="xyz" disabled="disabled">Button1</button> 
 
</div> 
 
<div style="background: rgb(247, 247, 247);"> 
 
    <button class="xyz" disabled="disabled">Button2</button> 
 
</div> 
 
<div style="background: rgb(247, 247, 247);"> 
 
    <button class="xyz">Button3</button> 
 
</div>

Answer 6

您可以使用jQuery選擇找到所需的元素，然後更改相應的CSS。

下面是你的選擇：

$(".xyz[disabled!='disabled']").parent() 

這裏是小提琴

Fiddle link

Answer 7

您可以使用屬性選擇。 .xyz[disabled]風格禁用按鈕和.xyz未禁用。

更多的是，這裏https://www.w3schools.com/css/css_attribute_selectors.asp

Answer 8

下如你所說的HTML是動態生成將做的工作。 這將適用背景顏色被啓用（禁用）的所有按鈕（而不是特定元素）

$('button:not(:disabled)').parent().css({ "background": "rgb(95, 49, 49)" }); 

的jsfiddle：https://jsfiddle.net/md9pthta/