按钮循环3个状态变化

Button to cycle through 3 state changes

本文关键字：变化 状态 3个 循环 按钮      更新时间：2023-09-26

我是JS的新手，正在做一个类分配，需要:

当用户单击突出显示按钮时，将css类应用于每个其他li元素，使颜色交替，并使图像出现。

我有麻烦让颜色变化的开关工作，我也不能让图像显示。

    <script>
        var colors = new Array()
        colors[0] = "#cc0099";
        colors[1] = "#a4c400";
        colors[2] = "#9900cc";
        var counter = 0;
        window.onload = function()
        {
            var highlightBtn= document.getElementById("highlight_btn");
            highlightBtn.onclick = switchColors;
        }
        function switchColors()
        {   
            var imgSrc = "images/" + [i];
            var changeLI = document.getElementsByClassName("change");
            changeLI.innerHTML = counter;
            counter++;              
        }
    </script>
    <h1>Happy Mothers Day!</h1>
    <h2>Things to get Mom:</h2>
    <ul>
        <li class="change">New Plants</li>
        <li>Flowers</li>
        <li class="change">A Day at the Spa</li>
        <li>A Picture of Yourself</li>
        <li class="change">New Shoes!</li>
        <li>Anything with a Heart on It</li>
        <li class="change"> Chocolate</li>
    </ul>
    <input id="highlight_btn" type="button" value="Highlight">

使用getElementsByClassName代替getClass, getClass甚至没有在文档中定义。要改变颜色，使用Element.style.color属性。

var changeLi = document.getElementsByClassName("change");
for(var i = 0; i < changeLi.length; i ++) {
    changeLi[i].style.color = colors[i];
});

您可以这样做(确切地说您想要什么并不清楚)，但这向您展示了原则。

HTML 

<h1>Happy Mothers Day!</h1>
<h2>Things to get Mom:</h2>
<img id="mom" src="">
<ul>
    <li class="change">New Plants</li>
    <li>Flowers</li>
    <li class="change">A Day at the Spa</li>
    <li>A Picture of Yourself</li>
    <li class="change">New Shoes!</li>
    <li>Anything with a Heart on It</li>
    <li class="change">Chocolate</li>
</ul>
<input id="highlight_btn" type="button" value="Highlight">
Javascript 

var colors = [];
var images = [];
var counter1 = 0;
var counter2 = 0;
colors.push("#cc0099");
colors.push("#a4c400");
colors.push("#9900cc");
images.push("http://imageshack.us/scaled/thumb/104/9071003006mini2lpl0.jpg");
images.push("http://imageshack.us/scaled/thumb/121/spirra.jpg");
images.push("http://imageshack.us/scaled/thumb/123/s4020001ret9qr.jpg");
function switchColors() {
    var changes = document.getElementsByClassName("change");
    Array.prototype.forEach.call(changes, function (change) {
        change.style.backgroundColor = colors[counter1];
    });
    counter1 += 1;
    if (counter1 > colors.length - 1) {
        counter1 = 0;
    }
    document.getElementById("mom").src = images[counter2];
    counter2 += 1;
    if (counter2 > images.length - 1) {
        counter2 = 0;
    }
}
window.addEventListener("load", function () {
    document.getElementById("highlight_btn").addEventListener("click", switchColors, false);
}, false);
在jsfiddle

相关文章：