Как мне переключить текст и цвет вместе в HTML и JavaScript? - PullRequest
Новая
       13

Как мне переключить текст и цвет вместе в HTML и JavaScript?

0 голосов
/ 10 октября 2019

Я хотел бы переключать определенные слова в текстовой строке. Я хотел бы, чтобы слова переключались (между КРАСНЫМ и ЗЕЛЕНЫМ в моем примере) - я могу сделать это без проблем. Но я также хотел бы, чтобы цвет соответствовал словам и менялся с красного на зеленый при изменении слов. Спасибо всем за помощь: -)

Вот мой код для переключения слов: 

<!DOCTYPE html>
<html lang="en">

<body> 
<div>
<p  style="font-size:30px">

<span>I want to toggle (and change colour) Red and Green:</span>
<span class="ISHide" onclick="toggle1(this)"><a href="#" >RED</a></span>

</p>
</div>
<script type="text/javascript">
function toggle1 (t1) {
if (t1.childNodes[0].innerHTML == "RED") {
    t1.childNodes[0].innerHTML = "GREEN";
} else {
    t1.childNodes[0].innerHTML = "RED"; 
}
}
</script>

</body>
</html>

1 Ответ

1 голос
/ 10 октября 2019

Если вы хотите сохранить свою функциональность на чистом уровне JavaScript и не слишком сильно изменять исходный код:

Просто добавьте t1.childNodes[0].style.color = "GREEN"; в свой оператор if.

иt1.childNodes[0].style.color = "RED"; в вашем else заявлении.

jsfiddle: https://jsfiddle.net/sL4gabvr/

Или Если вы хотите, чтобы в вашем коде был какой-то JQuery для вашего решения, чтобы переключать слова и цвета:

Я изменил ваш onlickв селектор щелчков JQuery и дал свой a атрибут id.

Jsfiddle: https://jsfiddle.net/snqhk8Lj/

Я старался не менять слишком много вашего кода, все же делая его разборчивым и, надеюсь, простымпонять.

...