[英]How to change text color using javascript for loop?
當有人點擊文本時,它會變為紅色,然后單擊其他文本返回黑色。 我有一個像下面的例子,但如何使用for循環縮短它?
<html>
<head>
<title>My little test page</title>
</head>
<body id="body">
<div id="myid">Hello Here !!</div><br>
<div id="myid2">Hello There !!</div><br>
<div id="myid3">Hello !!</div><br>
......many div......
</body>
</html>
<script language="javascript">
function changeColor1() {
document.getElementById("myid").className = "red";
document.getElementById("myid2").className = "";
document.getElementById("myid3").className = "";
}
function changeColor2() {
document.getElementById("myid").className = "";
document.getElementById("myid2").className = "red";
document.getElementById("myid3").className = "";
}
function changeColor3() {
document.getElementById("myid").className = "";
document.getElementById("myid2").className = "";
document.getElementById("myid3").className = "red";
}
function init() {
document.getElementById("myid").onclick = changeColor1;
document.getElementById("myid2").onclick = changeColor2;
document.getElementById("myid3").onclick = changeColor3;
}
window.onload = init();
</script>
試試這個吧。
<html>
<head>
<title>My little test page</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script language="javascript">
$(".divid").click(function(e){
$(".divid").css('color', '');
$(this).css('color', 'red');
});
</script>
<body id="body">
<div id="myid" class="divid">Hello Here !!</div><br>
<div id="myid2" class="divid">Hello There !!</div><br>
<div id="myid3" class="divid">Hello !!</div><br>
......many div......
</body>
</html>
示例jsfiddle
為所有div添加屬性名稱,如下所示
<div id='myid' name='colorchangingdiv[]'>Hello</div>
<div id='myid2' name='colorchangingdiv[]'>Hello</div>
....
現在在你的init函數中
function init() {
var allDivs = document.getElementsByName('colorchangingdivs[]');
for( var i =0; i < allDivs.length; ++i )
{
allDivs[i].onClick = changeColor(this);
}
}
在你的變色功能
function changeColor( obj )
{
var allDivs = document.getElementsByName('colorchangingdivs[]');
for( var i =0; i < allDivs.length; ++i )
{
allDivs[i].style.color = '';
}
// Now set the color to the obj passed
obj.style.color = 'red';
}
希望有所幫助。
<html>
<head>
<style>
.red{
color:red;
}
</style>
<title>My little test page</title>
<script type="text/javascript" src="jquery.js">
<script language="javascript">
//use jquery for change your color
$(document).ready(function(){
$(".myclass").click(function(){
$(".myclass").removeClass("red");
$(this).addClass("red");
});
});
</script>
</head>
<body id="body">
<div class="myclass">Hello Here !!</div><br>
<div class="myclass">Hello There !!</div><br>
<div class="myclass">Hello !!</div><br>
......many div......
</body>
</html>
為方便起見,使用類代替上述div標簽的id屬性,或者除了以上div標簽的id屬性之外:
<!DOCTYPE html>
<html>
<head>
<title>My little test page</title>
</head>
<body id="body">
<div class="mytext">Hello Here !!</div><br>
<div class="mytext">Hello There !!</div><br>
<div class="mytext">Hello !!</div><br>
<script>
var myselector = 'div.mytext';
function changeColor( e ){
var x=document.querySelectorAll(myselector);
for(i=0;i<x.length;i++){
x[i].style.color = '';
}
e.target.style.color = 'red';
}
function init(){
var x=document.querySelectorAll(myselector);
for(i=0;i<x.length;i++){
x[i].addEventListener("click", function(e){
changeColor(e);
});
}
}
window.onload = init();
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.