Необходимо при клике на кнопку менять цвет у блока на jquery

Question

Ситуация следующая. У меня есть кнопки и блоки, к каждой кнопке должен быть привязан свой блок, я на свое усмотрение устанавливаю ту или иную возможность смены цвета. Можно ли без долгих IF else добиться того, чтобы я нажимал на кнопку и у меня подсвечивался нужный мне блок и далее при нажатии на другую кнопку активный блок возвращался в исходный цвет и загорался другой. так как кнопок будет много и нужен универсальный вариант. В голове что-то подобное

       <div class='main'>
         <button id = 't1' class='t1'>  1  </button>
         <button id = 't2' class='t1'>  2  </button>
         <button id = 't3' class='t1'>  3  </button>
         <button id = 't4' class='t1'>  4  </button>
         <button id = 't5' class='t1'>  5  </button>
       </div>
       <div class='domain'>
         <div id='d1'>  1  </div>
         <div id='d2'>  2  </div>
         <div id='d3'>3</div>
       </div>

    let get_id = $(".main");
    let tmp = [];
      get_id.each(function(i,e){
        let get=$(e).find($( 'button[id^="t"]' ));
        tmp.push(get);
      });

[![Вот визуальная концепция][1]][1]

Вот визуальная концепция [1]: https://i.stack.imgur.com/n66LR.png

Answer 1

Можно избавиться от всех id и последовательно расставить блоки так, чтобы индексы кнопок - блоков совадали. Цвета блоков можно хранить в отдельном массиве (под теми же индексами), или в дата-атрибутах: <button data-color="red"> → .css("back...", $(this).data("color") ).

let colors = ["red", "orange", "yellow", "green", "violet"];

$(".btn").on("click", function() {
  $(".btn.active").removeClass("active");
  $(this).addClass("active");
  
  /***/  
  $(".box.active").css("background-color", "").removeClass("active");
  // Фактически, активный класс нужен только как метка: Чтобы удалить предыдущий цвет
  
  let index = $(".btn").index( this );
  // Находит номер нажатой кнопки (this) среди остальных кнопок

  $(".box").eq(index).css("background-color", colors[index]).addClass("active");

});

.box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: lightblue;
}

.btn.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<hr>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

Answer 2

Держите, виде плагина jQuery, может пригодится

(function ($) {
  $.fn.colorBlock = function (elems, colors) {
    var lastIndex;
    var that = this;
    $(this).on('click', function () {
        if (Number.isInteger(lastIndex)) {
            $(that).removeClass('active');
            $(elems).eq(lastIndex).css('background', window.getComputedStyle(this, null).getPropertyValue('background'));
        }
        var index = lastIndex = $(this).index();
        $(elems).eq(index).css('background', colors[colors.length > 1 ? index : 0]);
        $(this).addClass('active');
    });
  } 
})(jQuery);

$('.main button').colorBlock('.domain div', [
  '#c00','#00f','#456','#fc1','#8c9'
]);

html, body {margin:0; padding:0; box-sizing:border-box;}
.main, .domain {margin:10px;}
.main .active {background:#c95;}
.domain div {background:#ddd; margin:1px 0; padding:2px;}

<html lang="ru">
    <head>
        <title>title</title>
        <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
       <div class='main'>
         <button>1</button>
         <button>2</button>
         <button>3</button>
         <button>4</button>
         <button>5</button>
       </div>
       <div class='domain'>
         <div>1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
         <div>5</div>
       </div>
    </body>
</html>

БЛОГ НА HUSL

Необходимо при клике на кнопку менять цвет у блока на jquery

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