Выбор последнего класса jQuery

189

22 декабря 2018, 02:40

Как при клике на box-1 применять стили только к sub-box-1, при клике на box-2 применять стили к sub-box-2 и т.д. Количество блоков неограниченно. Вручную прописывать не вариант. Нужно универсальное решение. Есть вариант отлавливать последние классы box и sub-box и сравнивать, но не знаю как реализовать.

<div class="box box-1"></div> 
<div class="box sub-box-1"></div> 
<div class="box sub-box-1"></div> 
<div class="box sub-box-1"></div> 
<div class="box box-2"></div> 
<div class="box sub-box-2"></div> 
<div class="box box-3"></div>

Answer 1

$(".box").click(function(){ 
  var selector = []; 
  var classes = this.classList; 
  for (var i = 0; i < classes.length; i++) { 
    if ($(".sub-" + classes[i]).length) 
      selector.push(".sub-" + classes[i]); 
  } 
  console.log(selector.join(",")); 
  if (selector.length) 
    $(selector.join(",")).addClass("pink"); 
});

.box { 
  width:50px; 
  height:50px; 
  border:1px solid black; 
  display:inline-block; 
  background:lightgreen; 
} 
.pink { 
  background:pink; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box box-1"></div> 
<div class="box sub-box-1"></div> 
<div class="box sub-box-1"></div> 
<div class="box sub-box-1"></div> 
<div class="box box-2"></div> 
<div class="box sub-box-2"></div> 
<div class="box box-3"></div>