你好，我是javascript新手。每次单击时，我都试图更改容器中所有Divs的颜色。
示例：在第一次单击时，我希望所有div都显示为红色。在第二次单击上，我希望所有div都显示为绿色！
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<!--jquery easing plugin-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--custom css---->
<link href="css/phcoding.css" type="text/css" rel="stylesheet">
<title>cliciks</title>
<style>
</style>
</head>
<body>
<div id="container" onclick="myFunction();">
<div id="div1">This is div 1</p>
<div id="div2">This is div 2</p>
<div id="div3">This is div 3</p>
</div>
<script>
function myFunction(){
let x = document.getElementById("container");
y=x.children;
for(let i = 0; i< y.length;i++){
y[i].style.color="red";
y[i].style.color="green";
}
}
myFunction();
</script>
</body>
</html>
尝试：
$(".container").on("click",function(){
if($(this).css("color") == "red"){
$(this).css("color","green");
}else{
$(this).css("color","red");
}
}
首先，您需要颜色映射：
var color = {
"1": "red",
"2": "green"
};
接下来，我们添加一个事件侦听器并初始化点击计数：
var clickCount = 0;
var container = document.getElementById("container");
container.addEventListener("click", function (e)
{
clickCount++;
container.querySelectorAll("div[id^=\"div\"]").forEach(function (element)
{
element.style.color = color[clickCount];
});
});
最诚挚的问候。
这应该回答您的问题。
作为初学者，您可能会发现此资源很有用。https://vanillajstoolkit.com/helpers/
(function () {
var clickHandler = function (event) {
// Choose your target, in this instance all divs
var target = document.querySelectorAll('div');
// Loop through the targets
for (var i = 0; i < target.length; i++) {
// If the color is not red, make it red
if (target[i].style.backgroundColor != 'red') {
target[i].style.backgroundColor = 'red';
} else {
// If the color is red, it must be defacto green
target[i].style.backgroundColor = 'green';
}
}
};
// Every time a click happens on screen, clickHandler will fire
document.addEventListener('click', clickHandler, false);
}());
[像先前答案的混合...
<div id="container">
<div>This is div 1</div>
<div>This is div 2</div>
<div>This is div 3</div>
</div>
<script>
document.getElementById('container').addEventListener('click',function(e){
Array.from( this.querySelectorAll('div') ).forEach( div=>{
let colour;
switch( div.style.color ){
case '':colour='red';break; //default
case 'red':colour='green';break;
case 'green':colour='red';break;
}
div.style.color=colour;
})
});
</script>
除非您对子div的ID属性有特殊需要，可以删除它们，尽管您必须确保开始和结束标签匹配-因此<div>...</p>不正确！
制作颜色列表，然后遍历它们。示例：
$("#changeColor").click(function() {
var currentColor = $(".con-child").css("background-color");
var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
$(".con-child").css("background-color", next);
});.con-child {
display: block;
height: 100px;
width: 100px;
background-color: red;
margin-bottom: 30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containt" id="changeColor">
<div class="con-child">
</div>
<div class="con-child">
</div>
<div class="con-child">
</div>
</div>编辑！
如果您想更改文本颜色，可以从JS中删除“背景”：
$("#changeColor").click(function() {
var currentColor = $(".con-child").css("color");
var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
$(".con-child").css("color", next);
console.log(currentColor);
console.log(next);
});
如果您不想处理RGB，请改用HEX，这是如何转换这两个的好答案https://stackoverflow.com/a/1740716/8812168