如果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; }
答案 0 :(得分:2)
我不确定,如果我理解正确,但您可以尝试使用以下代码,这会增加课程&#39; blue&#39;如果至少有一个元素包含&#39; Hello&#39;,那么每个元素都会被改变颜色&#39; (我现在不会改变“你好”的颜色。
这是vanilla JavaScript版本。你可以(并且应该)使用jQuery执行此操作,如Karamell所述。
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;
答案 1 :(得分:0)
通过JQuery而不是getElementsByClassName选择更简单,更易读,更好的做法。
var targets = $('.myDIV');
targets.each(function( index, element ) {
if(element.innerHTML.indexOf("Hello") != -1) {
$('.changedcolor').css('background-color','blue');
$(element).addClass('blue');
}
});
答案 2 :(得分:0)
这取决于您希望何时触发此操作。您可以使用以下代码在页面加载时执行此操作:
window.onload = function(){
然后你在这里编码,但替换&#34; myDIV blue&#34;与&#34;蓝&#34;就像在css类名中一样。