切换背景，而切换文本 [英] Switching backgrounds, while switching text
问题描述
我可以让文本循环无限，身体颜色改变一次：
I was able to make the text loop infinitely and the body color change once:
<?php?>
<style type="text/css">
<!--
header{background-color:orange;}
#color1{background-color:red;}
#color2{background-color:green;}
#color3{background-color:blue;}
-->
</style>
<script type="text/javascript">
<!--
var flip = (function() {
var flip = ['_addText1','_addText2','_addText3'];
var count = -1;
return function() {
return flip[++count % flip.length];
}
}());
-->
</script>
<body id="color1">
<header onclick="document.getElementById('click').innerHTML = flip(); document.getElementById('color1').setAttribute('id', 'color2');">
<h1>StaticText<a id="click">_ThisWillChange</a></h1>
<p>Click anywhere in the header to change the text above.<br />
This will also change the body color.</p>
</header>
</body>
<?php?>
第一个问题是：如果我向'onclick'属性添加更多的颜色更改，它会停止一起工作。基本上我想让颜色与文本循环：
The first problem is; if I add more color changes to the 'onclick' attribute it stops working all together. Basically I want the color to loop with the text:
document.getElementById('color2').setAttribute('id', 'color3');
document.getElementById('color3').setAttribute('id', 'color1');
第二个问题是我在javascript中不太流利。我真的很幸运我想出这真的很诚实。
The second problem is that I'm not really 'fluent' in javascript. I'm actually lucky I figured out this much to be honest.
我确定有一种方法把它所有的javascript（保持我的HTML清洁） ，但我不知道如何。
I'm sure there's a way to put it all into the javascript (to keep my HTML clean), but I don't know how.
任何帮助将是最感谢！先感谢...
Any help would be most appreciated! Thanks in advance...
推荐答案
为什么要更改元素的ID if你是如此热衷于设置颜色。
Why do you want to change the id of the element if you are so keen to set the color.
您可以在body元素上的类，这应该为您完成工作。
You can just the class on the body element which should get the work done for you.
绑定事件内联的坏习惯。使用javascript绑定事件。
Secondly it's a bad practice to bind events inline. Use javascript to bind the events as well.
<body id="color1" class="color1">
这是编写代码的一种方法。
This is one way of writing the code.
代码
Code
var header = document.getElementsByTagName('header')[0];
header.addEventListener('click', function () {
var body = document.getElementById('color1');
document.getElementById('click').innerHTML = flip("text");
body.className = flip("color");
});
var flip = (function () {
var flip = ['_addText1', '_addText2', '_addText3'],
colors = ["color1", "color2", "color3"];
var count = -1,
colorCount = -1;
return function (arg) {
if(arg === 'text')
return flip[++count % flip.length];
if(arg === 'color')
return colors[++colorCount % colors.length];
}
})();
HTML
<body id="color1" class="color0">
<header>
<h1>StaticText<a id="click">_ThisWillChange</a></h1>
<p>Click anywhere in the header to change the text above.
<br />This will also change the body color.</p>
</header>
</body>
CSS
header {
background-color:orange;
}
.color0 {
background-color:yellow;
}
.color1 {
background-color:red;
}
.color2 {
background-color:green;
}
.color3 {
background-color:blue;
}
Check Fiddle
这篇关于切换背景，而切换文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
