При наведении на блок, изменить цвет другого блока

Question

Есть шесть блоков "1, 2, 3" и "a, b, c". Надо при нажатии или наведении на блок "a" изменять backgroundColor у блока "1" ну и так далее ("b" ->"2", "c" -> "3") соответственно. Блоки не дочерние.

<div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<div class="blocks">
    <div class="block">a</div>
    <div class="block">b</div>
    <div class="block">c</div>
</div>


let priceItem = document.querySelectorAll('.items.item');
let btnCircle = document.querySelectorAll('.blocks.block');
let color = 'red';

for(let i = 0; i < 3; i++){
    btnCircle[i].onmouseover = colorChange;
    btnCircle[i].onmouseout = colorChange;  
    priceItem[i].onmouseover = colorChange;
    priceItem[i].onmouseout = colorChange;
}

function colorChange() {
    this[i].style.backgroundColor = color;  
}

Answer 1

Вы объявляете функцию вне цикла, и она не видит переменную i.

По вашему методу, можно было так:

for(let i = 0; i < 3; i++){
  priceItem[i].onmouseover = function(){ colorChange(i) };
  // Передавая функции значение `i` в качестве аргумента
}

function colorChange(i) { // Которую она здесь получит и сможет использовать
  btnCircle[i].style.backgroundColor = color;
}

селектор .items.item ищет все элементы, у которых есть оба класса. Для дочерних элементов нужен пробел .items .item

Но, списки элементов есть, нужные индексы в цикле - есть, остается их связать:

let items = document.querySelectorAll('.items .item');
let blocks = document.querySelectorAll('.blocks .block');

for (let i = 0; i < items.length; i++) { 
  blocks[i].addEventListener('mouseenter', function(){
    items[i].style.backgroundColor = "orange";
  });
  
  blocks[i].addEventListener('mouseleave', function(){
    items[i].style.backgroundColor = "";
  });
}

.items, .blocks { display: flex; }

.item, .block { width: 50px; height: 50px; margin: 4px; background: #ddd; }

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="blocks">
  <div class="block">a</div>
  <div class="block">b</div>
  <div class="block">c</div>
</div>

Answer 2

Используй data-*:

<div class="items">
    <div class="item" data-item="1">1</div>
    <div class="item" data-item="2">2</div>
    <div class="item" data-item="3">3</div>
</div>

<div class="blocks">
    <div class="block" data-target="1">a</div>
    <div class="block" data-target="2">b</div>
    <div class="block" data-target="3">c</div>
</div>

И js:

(document).ready(function(){
    $('.block').on('click', function(e){
       var target = this.dataset.target;
       $('div[data-item = '+ target +']').css('background', '#333');
    });
});

Могут быть ошибки, т.к. не могу проверить сейчас правильность кода, но логику, надеюсь, ты понял.

Тут можешь прочесть про data-*: http://htmlbook.ru/blog/atribut-data

БЛОГ НА HUSL

При наведении на блок, изменить цвет другого блока

Ответы (2 шт):