Question

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

<?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清洁），但我不知道如何。

任何帮助都将非常感谢！提前谢谢......

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

<强> Check Fiddle

在切换文本时切换背景

1 个答案: