如何在jQuery中單擊文本時單獨更改css樣式？

我有很多綠色的字符串：的style.css：如何在jQuery中單擊文本時單獨更改css樣式？

.green_text { 
    color: green; 
    font-family: 'Arial'; 
    font-size: 20px; 
    font-weight: bold; 

} 
.green_text:hover { 
    cursor: pointer; 
}

的index.html：

<span class="green_text">text 1</span><br> 
<span class="green_text">text 2</span><br> 
<span class="green_text">text 3</span><br> 
<span class="green_text">text 4</span><br> 
<span class="green_text">text 5</span><br> 
<span class="green_text">text 6</span><br> 
<span class="green_text">text 7</span><br> 
<span class="green_text">text 8</span><br>

的script.js：

$(document).ready(function(){ 
$(".green_text").click(function(){ 
    $(this).css("color","red"); 
}) 
})

我希望當我點擊文本1的顏色改爲紅色，但是當我點擊text2時，只有text2的顏色會變成紅色，文字1變成綠色。我怎麼能用很多字符串來做到這一點。

來源

2017-04-25 user7883113

什麼你試過嗎？ –

@NathanP。歐普發佈了他已經試過的東西。 –

剛上的其他.green_txt改變CSS的點擊和當前添加顏色紅色。

$(document).ready(function() { 
    $(".green_text").click(function() { 
    $(".green_text").css("color","green"); 
    $(this).css("color", "red"); 
    }) 
})

下面是工作片段。

$(document).ready(function() { 
 
    $(".green_text").click(function() { 
 
    $(".green_text").css("color","green"); 
 
    $(this).css("color", "red"); 
 
    }) 
 
})

.green_text { 
 
    color: green; 
 
    font-family: 'Arial'; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 
.green_text:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="green_text">text 1</span><br> 
 
<span class="green_text">text 2</span><br> 
 
<span class="green_text">text 3</span><br> 
 
<span class="green_text">text 4</span><br> 
 
<span class="green_text">text 5</span><br> 
 
<span class="green_text">text 6</span><br> 
 
<span class="green_text">text 7</span><br> 
 
<span class="green_text">text 8</span><br>

來源

2017-04-25 08:36:46

我想單擊text1時顏色變成紅色，但當我單擊text2時，只有text2的顏色會變成紅色，而文本1變成綠色。

您可以先將其餘的綠色轉爲綠色。

$(".green_text").click(function(){ 
    $(".green_text").css("color","green"); 
    $(this).css("color","red"); 
})

來源

2017-04-25 08:34:44

'$（「。green_text」）.css（「color」，「green」）;' – bugscoder

@bugscoder是的。剛剛修好。 –

在點擊設置的所有元素的顏色然後只改變點擊的元素的顏色red。

$(document).ready(function(){ 
 
    $(".green_text").click(function(){ 
 
     $(".green_text").css("color","green"); 
 
     $(this).css("color","red"); 
 
    }) 
 
})

.green_text { 
 
    color: green; 
 
    font-family: 'Arial'; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 

 
} 
 
.green_text:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="green_text">text 1</span><br> 
 
<span class="green_text">text 2</span><br> 
 
<span class="green_text">text 3</span><br> 
 
<span class="green_text">text 4</span><br> 
 
<span class="green_text">text 5</span><br> 
 
<span class="green_text">text 6</span><br> 
 
<span class="green_text">text 7</span><br> 
 
<span class="green_text">text 8</span><br>

來源

2017-04-25 08:35:55 Mamun

首先我強烈建議增加/過在JS代碼中設置css()去除類。從那裏你可以使用siblings().removeClass()來做你所需要的。另請注意，在:hover狀態下設置pointer是多餘的。直接把它放在.green_text類中。試試這個：

$(document).ready(function() { 
 
    $(".green_text").click(function() { 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
    }) 
 
})

.green_text { 
 
    color: green; 
 
    font: bold 20px Arial; 
 
    cursor: pointer; 
 
} 
 
.green_text.active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="green_text">text 1</span><br> 
 
<span class="green_text">text 2</span><br> 
 
<span class="green_text">text 3</span><br> 
 
<span class="green_text">text 4</span><br> 
 
<span class="green_text">text 5</span><br> 
 
<span class="green_text">text 6</span><br> 
 
<span class="green_text">text 7</span><br> 
 
<span class="green_text">text 8</span><br>

來源

2017-04-25 08:37:02

如何在jQuery中單擊文本時單獨更改css樣式？

回答

相關問題