Окраска двух разных элементов javascript

13 сентября 2021, 18:50

Не знал как правильно написать заголовок, так что не ругайтесь. Вообщем проблема такая: Есть 2 элемента с id при клике по дочернему элементу я определяю id и показываю кнопку при нажатии на которую я крашу кликнутый элемент в красный цвет, но проблема в том, что при клике сначала на один элемент, а потом на второй, и при последнем клики на button у меня в красный окрашивается не последний кликнутый элемент а сразу оба. Думал проблема в том, что нужно подождать время после клика по первому, что бы кнопка пропала, после чего кликнуть по второму => по кнопке и тогда все будет хорошо, но нет. В чем проблема? Вот код:

<body>
    <div class="el__1" id="1"><a style="background-color: orange">индикатор</a></div>
    <div class="el__2" id="2"><a style="background-color: orange">индикатор</a></div>
    <button style="display: none">push</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $('a').click(function() {
        let id = $(this).parent('div').attr('id');
        console.log(id);
        $('button').show();
        setTimeout(() => $('button').hide() , 1500);
        $('button').click(function() {
            $(`.el__${id} > a`).css('background-color', 'red');
            console.log(`.el__${id} > a`);
        }); // end click
    }); // end click
</script>
</body>

Вот ссылка на codepen: https://codepen.io/Cat_In_Ears/pen/mddPVvm

Answer 1

$("button").click(function() { 
  $(".active").toggleClass("red"); 
}); 
 
var timer; 
$("a").click(function() { 
  $(".orange").removeClass("active"); 
  $(this).addClass("active"); 
 
  $("button").show(); 
  clearTimeout(timer); 
  timer = setTimeout(() => $("button").hide(), 3000); 
});

.orange { 
  background-color: orange; 
} 
 
.red { 
  background-color: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="el__1" id="1"><a class="orange">индикатор</a></div> 
<div class="el__2" id="2"><a class="orange">индикатор</a></div> 
 
<button style="display: none">push</button>

Answer 2

В общем проблема была в обработчике событий. Когда я привязываю button событие click, то оно постоянно привязывается с новым значением id при каждом клике по a => Я должен вместе со скрытием кнопки также удалять обработчик событий с button. Вот какой код я написал:

$('a').click(function() { 
  let id = $(this).parent('div').attr('id'); 
  let color = $(`.el__${id} > a`).css('background-color'); 
  console.log(color) 
  $('button').show(); 
 
  $('button').click(function() { 
    if (color != 'rgb(255, 0, 0)') { 
      $(`.el__${id} > a`).css('background-color', 'red'); 
    } else { 
      $(`.el__${id} > a`).css('background-color', 'orange'); 
    } 
  }); // end click 
 
  setTimeout(() => { 
    $('button').hide(); 
    $('button').unbind('click'); 
  }, 2000); 
}); // end click

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="el__1" id="1"><a style="background-color: orange">индикатор</a></div> 
<div class="el__2" id="2"><a style="background-color: orange">индикатор</a></div> 
 
<button style="display: none">push</button>