單擊時迭代數組

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

演示

Answer 2

 $('#down').click( function(){ i++; });

您需要在向下輸入中添加id屬性：

 <input type='button' id='down'>

該jQuery將與#down正確匹配

Answer 3

把你的HTML作為

<input type="button" id="up" value="change color up">
<input type="button" id="down" value="change color down">
<div id="myValue">VALUE</div>

你的js：

var fancyColors = [
    "#9c9e9f",
    "#848e6f",
    "#778861",
    "#7da75d",
    "#7fa433",
    "#97bf0d"];


$(function () {

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



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


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

現場演示： http ： //jsfiddle.net/jY24d/

Answer 4

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

   $(function () { 

        window.colorIndex=1;
        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() {

        if(colorIndex<1){colorIndex=6;}
            valuE.css("color", fancyColors[--colorIndex]); // do i--
        });  


        up.on("click", function() {

       if(colorIndex >6){colorIndex=1;}            
            valuE.css("color", fancyColors[colorIndex++]); // do i++
        });  
    });

嘗試這個 ：）

Answer 5

你是學生，對吧？ 好吧，我不會為你做功課，但我會給你以下提示：

1. 按鈕需要ID
2. 迭代器（i）在函數首次執行之前需要一個值
3. 您無法定義單擊事件以在函數內部調用函數

但無論如何，我確信你的演講材料......