Javascript 单击时在数组上迭代

我正在制作一个演示文稿。 有一个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>

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

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

您需要向向下输入添加id属性：

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

该jQuery将与#down

正确匹配，使您的html成为

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

现场演示：

fancyColors={
1.“#9c9e9f”，
2:"848e6f",，
3: "#778861",
4:"7da75d",，
5:"7fa433",，
6:#97bf0d"
};
$（函数（）{
window.colorIndex=1；
var值=$（“#myValue”）；
var getSize=$（'#myValue'）.css（“字体大小”）；
var getColor=$（'#myValue'）.css（“color”）；
var down=$（“#down”）；
var up=$（“#up”）；
css（“颜色”，fancyColors[1]）；
down.on（“单击”，函数（）{
如果（colorIndex6）{colorIndex=1；}
css（“color”，fancyColors[colorIndex++]）；//我知道吗++
});  
});

试试这个：）

像这样试试

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

---

你是个学生，对吗？我不会帮你做家庭作业，但我会给你以下提示：

按钮需要ID

迭代器（i）在函数首次执行之前需要一个值

不能定义单击事件来调用函数本身内部的函数

---

但我肯定你的课堂材料中也有这样的内容…

fancyColors

不是数组。

$（“#向上”）

不起作用，因为

up

不是id。

down

@Satpal也一样：你的论点无效：P@Satpal它比什么？@auL5agoi-它是一个物体，但钥匙是数字，我没有在这里添加它，但在我的源代码中它是正确的。对不起，弄错了。你能把完整的代码粘贴进去吗。我可能错过了什么。Thanks@auL5agoi）欢迎。这是我的荣幸；）

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

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

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