javascript - 单击时迭代数组

Question

我正在创建演示文稿。有一个 div 元素确实改变了字体大小很多。有两个按钮，一个应该增加数组中的颜色，另一个按钮其他人应该减少它。

html:

 <input type="button" id="up" value="change color up">
    <input type="button" id="down" value="change color down">

    <div id="myValue">
   VALUE 
    </div>

Jquery:

     fancyColors = {
            1: "#9c9e9f",
            2: "#848e6f",
            3: "#778861",
            4: "#7da75d",
            5: "#7fa433",
            6: "#97bf0d"
        };


   $(function () { 

        var i;
        var valuE = $('#myValue');
        var getSize = $('#myValue').css("font-size");
        var getColor = $('#myValue').css("color");
        var down = $('#down');
        var up = $('#up');



        valuE.css("color", fancyColors[1]);
        down.on("click",function() {
            valuE.css("color", fancyColors[i]); // do i--
        });  


        up.on("click", function() {
            valuE.css("color", fancyColors[i]); // do i++
        });  
    });

我有一个 for 循环，但这对我来说不起作用。我想对于有经验的人来说这应该很容易。感谢您抽出时间。

Answer 1

尝试这样

fancyColors = [
     "#9c9e9f",
     "#848e6f",
     "#778861",
     "#7da75d",
     "#7fa433",
     "#97bf0d"
 ];
 var index = 0;
 $("#up").click(function () {
     index++;

     var i = fancyColors.length % index;
     $("#myValue").css("background-color", fancyColors[i]);
 });
 $("#down").click(function () {
     index--;
     var i = fancyColors.length % index;

     $("#myValue").css("background-color", fancyColors[i]);
 });

Demo