0

Необходимо, чтобы менялся цвет <div>, при удержании клавиши нажатой:

$(document).ready(function() {
  var i = 10;
  $(document).keydown(function(event) {
    if (event.which == 68) {
      $('div').css("background-color", "RGB(200,100," + i + ")");
      i++;
    }
  });
});
.div { background-color: rgba(200, 100, 100); height: 100px; width: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div"></div>

Как можно сделать, чтобы не переменная i не была глобальной?

6
  • .keypress()
    – Spectre
    31 янв 2013 в 16:16
  • И что? Может на гугл тогда сразу ссылку кидать? 31 янв 2013 в 16:21
  • а с чего должно? цвета 1001 все равно нет, i нигде не увеличивается...
    – thunder
    31 янв 2013 в 16:21
  • $(document).ready(function(){ var i = 10; $(document).keydown(function(event) { if(event.which == 68){ $('div').css("background-color","RGB(200,100,"+i+")"); i++; } }); }); Теперь работает. Но как можно сделать, чтобы не оглобаливать переменную i? 31 янв 2013 в 16:31
  • 1
    - пища для размышлений
    – Spectre
    31 янв 2013 в 20:30

1 ответ 1

1

Чтобы переменная не была глобальной, нужно каждый раз получать текущее значение цвета и производить нужные вычисления:

$(document).ready(function () {
  $(document).keydown(function (event) {
    if (event.code == 'Space') {  // Если нажат "Пробел"
      var a = $('.div')
        .css('background-color')  // Получаем текущий цвет
        .match(/([\d.]+)/g)       // Создаём массив значений каналов
        .map((el) => Number(el)); // Преобразуем строковые значения в числовые
      
      /* Производим необходимые вычисления со значениями */
      // a[0] = 200;                            // R
      // a[1] = 100;                            // G
         a[2] = minmax(++a[2]);                 // B
      // a[3] = значение | a[3] | 1;            // A
      
      /* Устанавливаем новый цвет, объединив значения массива */
      $('.div').css('background-color', `rgba(${a.join(",")})`).text(a[2]);
    }
  });
});

function minmax(d) { if (d < 0) d = 0; if (d > 255) d = 255; return d; }
.div { background-color: rgba(200, 100, 100); height: 100px; width: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div">Нажмите "Пробел"</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.