1

我能够使文本无限循环并且主体颜色改变一次：

<?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' 属性添加更多颜色更改，它将停止一起工作。基本上我希望颜色与文本循环：

document.getElementById('color2').setAttribute('id', 'color3');
document.getElementById('color3').setAttribute('id', 'color1');

第二个问题是我在 javascript 中并不是真的“流利”。老实说，我真的很幸运我想出了这么多。

我确信有一种方法可以将它全部放入 javascript 中（以保持我的 HTML 干净），但我不知道如何。

非常感激任何的帮助！提前致谢...

4

1 回答 1

1

如果您如此热衷于设置颜色，为什么要更改元素的 id 。

您可以只使用 body 元素上的类，它应该为您完成工作。

其次，内联绑定事件是一种不好的做法。也使用 javascript 来绑定事件。

<body id="color1" class="color1">

这是编写代码的一种方式。

代码

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;
}

检查小提琴

于 2013-08-10T00:23:25.067 回答