Перебирать массив по клику

Question

Перебирать массив по клику

0

Я создаю презентацию. Существует элемент 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, но это не сработало для меня. Я думаю, это должно быть довольно легко для более опытного человека. Спасибо за ваше время.

ALEX_AME 31 март 2014, в 10:15

Источник

0

fancyColors не является массивом.
Satpal 31 март 2014, в 07:25
1

$('#up') не будет работать, потому что up не id. То же самое касается и down .
Akash Agrawal 31 март 2014, в 07:26
0

@Satpal: ваш аргумент неверен: P
techouse 31 март 2014, в 07:27
0

@Satpal Что это, чем?
AME 31 март 2014, в 07:27
0

@auL5agoi auL5agoi - это объект, но ключи цифры, поэтому все еще работает.
adeneo 31 март 2014, в 07:28
0

i не undefined
adeneo 31 март 2014, в 07:28
0

Если вам нужен массив, вы должны использовать [] вместо {}, {} для определения объекта.
Charles-Antoine Fournel 31 март 2014, в 07:32
0

@techouse, что ты имеешь в виду под your argument is invalid :P ? ОП должен знать разницу между объектом и массивом. Так как ключи являются числовыми, то будет работать скобочная запись
Satpal 31 март 2014, в 07:34

Показать ещё 6 комментариев

Теги:

javascript

jquery

5 ответов

2

Попробуйте это

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

демонстрация

Anoop Joshi 31 март 2014, в 06:08

0

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

Попробуй это :)

Godly Mathew 31 март 2014, в 06:22

0

Вы студент, да? Хорошо, я не буду делать домашнее задание для вас, но я дам вам следующие советы:

Кнопки нуждаются в идентификаторах
Итератору (i) требуется значение до того, как функция сначала выполнит
Вы не можете определить события щелчка для вызова функции внутри самой функции

Но я уверен, что в ваших лекционных материалах все равно...

user3451194 31 март 2014, в 06:06

0

спасибо за советы.
AME 31 март 2014, в 07:45

0

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

Вам нужно добавить атрибут id к вашему вводу вниз:

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

Этот jQuery будет корректно соответствовать #down

Charles-Antoine Fournel 31 март 2014, в 05:19

0

Я не добавил это здесь, но в моем исходном коде это правильно. Извини за ошибку.
AME 31 март 2014, в 07:32
0

Не могли бы вы вставить полный код. Возможно, я что-то пропустил. Спасибо
AME 31 март 2014, в 07:35
1

@ auL5agoi, ануп сделал это для меня :)
Charles-Antoine Fournel 31 март 2014, в 09:05

Показать ещё 1 комментарий

Ещё вопросы

$('#up') не будет работать, потому что up не id. То же самое касается и down .
@auL5agoi auL5agoi - это объект, но ключи цифры, поэтому все еще работает.
Если вам нужен массив, вы должны использовать [] вместо {}, {} для определения объекта.
@techouse, что ты имеешь в виду под your argument is invalid :P ? ОП должен знать разницу между объектом и массивом. Так как ключи являются числовыми, то будет работать скобочная запись
Я не добавил это здесь, но в моем исходном коде это правильно. Извини за ошибку.
Не могли бы вы вставить полный код. Возможно, я что-то пропустил. Спасибо

Amit Joki · Accepted Answer · 2014-03-31T05-39-00.000Z

Сделайте свой 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/

Спасибо за уделенное время. работает действительно хорошо :)