我有以下代码,我试图弄清楚如何才能设置第一个按钮为白色,如果我再次点击它,同样的事情为下一个按钮。如果我点击一次它就会变成红色,但如果我再次点击,它就会变成白色。任何想法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> color divs </title>
<meta name="author" content="Lee Middleton" />
<meta name="keywords" content="CIS120/121/122" />
<meta name="description" content="Template for x/html, CSS and JavaScript" />
<style type="text/css">
.container {
border: 1px solid blue;
border-radius: 10px;
width: 100px;
height: 50px;
}
</style>
<script language="javascript">
function changeColor(whichOne)
{
var thatOne = eval(whichOne);
var element = document.getElementById(whichOne);
var color = "ff";
var stringColor;
if (whichOne == 1)
{
stringColor = "#" + color + "0000";
else {
alert('it was clicked') ;
}
}
}
else if (whichOne== 2)
{
stringColor = "#0000" + color;
}
element.style.backgroundColor = stringColor;
}
</script>
<body>
<div class='container' id='1' style='margin: 150px 0 0 75px; float: left;' onclick='changeColor(1);'></div>
<div class='container' id='2' style='margin: 150px 0 0 175px; float: left;' onclick='changeColor(2);'></div>
<div class='container' id='3' style='margin: 150px 0 0 220px; float: left;' onclick='changeColor(3);'></div>
</body>
</html>
正如另一种解决方案所提到的,您可以将先前的颜色存储在一个变量中,以便在必要时重置它,但是如果您只想将元素返回到其默认颜色,则有一种更简单的方法。
只做:
element.style.backgroundColor = '';
这只是取消style属性的background-color部分,允许使用css中的颜色。
要在默认值和颜色之间切换你可以这样做:
element.style.backgroundColor = element.style.backgroundColor ? '' : '#' + color;
您需要将按钮的先前状态保存在此函数之外,如
var prevColor = "#ffffff";
function changeColor(whichOne) {
prevColour = (this.prevColor=="#ffffff")?"#ff0000":"#ffffff";
// use this prevColour to change button colour
}
第一点
遇到{}闭包问题。您的第一个if包含一个没有关联if的else。同样的if是close{}但是在else if
之前再次关闭它2如果我理解正确的话,你有一个功能来切换按钮的颜色,基于它的ID。
我会写类似的东西
if(document.getElementById(whichOne).style.backgroundColor==COLOR1)
{
document.getElementById(whichOne).style.backgroundColor = COLOR2
}
else
documenet.getElementById(whichOne).style.backgroundColor = COLOR2
Color 1和Color 2以及函数中的常量,不需要填充命名空间
从切换事件中通过CSS标记切换background-color或任何您想要操作的属性。
把这个类添加到你的CSS中
.container {
background-color: #d1d1d1;
}
.colorMe{
background-color: red;
}
使用这个脚本
$(document).ready(function(){
$('.container').on("click", function(){
$(this).toggleClass('colorMe');
});
});
HTML <div class='container'> Button-1 </div>
<div class='container'> Button-2 </div>
<div class='container'> Button-3 </div>
不要忘记链接jQuery库。
下面是一个活生生的工作示例:
如果你想做的只是改变外观,那么你应该坚持使用CSS类。正是这种类型的内联代码,当您在几个月后调试它时,当客户希望它变成粉红色而不是白色时,会让您感到头痛。
内联事件绑定也是如此。Javascript可以通过多种方式调用,当有小片段分散在HTML中时,跟踪它们很快就会成为一种负担。
我建议这样做:
HTML<div class='container green' id='1' ></div>
<div class='container blue' id='2' ></div>
<div class='container yellow' id='3'></div>
风格.container.active { background-color:white;}
JAVASCRIPT function changeColor(el){
var classes = el.className.split(' '), // get the current classes
index = classes.indexOf('active'), // see if 'active' is one of them
hasClass = index > -1;
if (hasClass)
el.className = (classes.splice(index, 1), classes.join(' ')); // remove 'active' and stringify
else
el.className+= " active";
}
// put all calls that require the DOM to be loaded in a function
function init(){
var divs = document.getElementsByClassName('container'), // get all elements that need binding
divCount = divs.length; // the length of the array for looping
// loop through array
while(divCount--){
// bind each element
// using an anonymous function wrapper to pass 'this' parameter
divs[divCount].addEventListener('click', function() { changeColor(this) });
}
}
// fire the init function once the window is loaded
window.addEventListener('load', init);
http://jsfiddle.net/NpW9X/你可以试试:
JavaScript:var times = 0;
function isEven(num) {
if (num % 2 == 0) return true;
else return false;
}
function changeColor(whichOne) {
if (isEven(times)) {
document.getElementById(whichOne).style.color = 'white';
} else {
document.getElementById(whichOne).style.color = 'red';
}
times++;
}