Question

如果myDiv中的文本等于字符串“Hello”，则myDiv类的每个div元素的背景颜色将变为蓝色。我想修改这个javascript代码，如果myDiv类中的字符串为“Hello”，则每个名为changedcolor的类都会将其背景颜色更改为蓝色。

<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<div class="myDIV">
Hello
</div>
<div class="changedcolor">
Bye
</div>


<div class="myDIV">
Hello
</div>
<div class="changedcolor">
Bye
</div>

<script>

var targets = document.getElementsByClassName('myDIV');
for( var i in targets ) {
if (targets[i].innerHTML.indexOf("Hello") != -1) {
    targets[i].className='myDIV blue';
}  
};
</script>

</body>
</html>

这是在style.css：

 .blue { background-color: blue; }

Answer 1

我不确定，如果我理解正确，但您可以尝试使用以下代码，这会增加课程＆＃39; blue＆＃39;如果至少有一个元素包含＆＃39; Hello＆＃39;，那么每个元素都会被改变颜色＆＃39; （我现在不会改变“你好”的颜色。

这是vanilla JavaScript版本。你可以（并且应该）使用jQuery执行此操作，如Karamell所述。

＆＃13;

var targets = document.getElementsByClassName('myDIV');
var foundHello = false;

for (var i = 0; i < targets.length; i++) {
  // Plain Javascript
  if (targets[i].innerHTML.indexOf("Hello") != -1) {
    elementList = targets[i].querySelectorAll('.changedcolor');
    
    for (var j = 0; j < elementList.length; j++) {
       elementList[j].className = 'changedColor blue';
    }
  }
}

＆＃13;

.blue {
  background-color: blue;
}

＆＃13;

<body>
  <div class="myDIV">
    Hello
    <div class="changedcolor">Bye</div>
  </div>
  <div class="myDIV">
    These are not the druids you are looking for.
    <div class="changedcolor">See you later</div>
  </div>
</body>

＆＃13;

Answer 2

通过JQuery而不是getElementsByClassName选择更简单，更易读，更好的做法。

var targets = $('.myDIV');

targets.each(function( index, element ) {
    if(element.innerHTML.indexOf("Hello") != -1) {
        $('.changedcolor').css('background-color','blue');
        $(element).addClass('blue');
    }
});

Answer 3

这取决于您希望何时触发此操作。您可以使用以下代码在页面加载时执行此操作：

window.onload = function（）{

然后你在这里编码，但替换＆＃34; myDIV blue＆＃34;与＆＃34;蓝＆＃34;就像在css类名中一样。

如果另一个元素等于某个文本

3 个答案: