Определить нужный класс и заменить его

12 июня 2019, 10:40

В общем есть блок, который имеет два класса, допустим выглядит так:

<div class="block class-A class-1"></div>

Скриптом можем менять первый и второй класс, вот только "изменить" можем так:

class-A -> class-A || class-B
class-1 -> class-1 || class-2 || class-3 || class-4

Скрипт на смену выглядит так:

$('#changeOneClass').bind('change',function(){ 
  var thisValue = $(this).val(); 
   
  if(thisValue=='class-A')  
    $('.block') 
      .removeClass('class-B') 
      .addClass('class-A'); 
  else if(thisValue=='class-B')  
    $('.block') 
      .removeClass('class-A') 
      .addClass('class-B'); 
}); 
 
$('#changeOneClass').bind('change',function(){ 
  var oldThisValue = '', 
      thisValue = $(this).val(); 
  // Вот тут уже сталкнулся с проблемой, которую хочу решить в вопросе. 
  // Суть в том, что у меня реализованно "изменение" по другому, у меня ещё есть переменная "oldThisValue" - она является прошлым значением и потом получается так: 
  $('.block') 
      .removeClass(oldThisValue) 
      .addClass(thisValue); 
});

.block {display: block; width: 100px; height: 100px; border: 3px solid transparent;} 
 
.class-A {background: red;} 
.class-B {background: blue;} 
 
.class-1 {border-color: yellow;} 
.class-2 {border-color: green;} 
.class-3 {border-color: gray;} 
.class-4 {border-color: violet;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block class-A class-1"></div> 
 
<select id="changeOneClass"> 
  <option>class-A</option> 
  <option>class-B</option> 
</select> 
 
<select id="changeTwoClass"> 
  <option>class-1</option> 
  <option>class-2</option> 
  <option>class-3</option> 
  <option>class-4</option> 
</select>

Суть в том, что это изменение работает с LocalStorage и при загрузке оно подключается.
С первым вариантом (class-A || class-B) проще, я просто проверяю LocalStorage == class-A - то удаляю class-B и ставлю class-A

А как быть со вторым вариантом, где выборов больше?
В голову приходит только массив с class-1, class-2, class-3, class-4, потом проверить есть что-то в .block и если есть, то удалить этот класс и добавить другой, из LocalStorage.

Важно: вполне вероятно, что у .block, помимо class-A и class-1 будут ещё какие-то классы.

Answer 1

Не понял, при чем здесь LocalStorage.

$('#changeOneClass,#changeTwoClass').change(function() { 
  $(this).find("option").each(function() { 
    $('.block').removeClass($(this).val()); 
  }); 
  $('.block').addClass($(this).val()); 
 
  localStorage.setItem(this.id, this.value); 
}); 
 
window.addEventListener("load", function() { 
  var v; 
 
  v = localStorage.getItem("changeOneClass"); 
  if (v) 
    $("#changeOneClass").val(v); 
  $("#changeOneClass").change(); 
 
  v = localStorage.getItem("changeTwoClass"); 
  if (v) 
    $("#changeTwoClass").val(v); 
  $("#changeTwoClass").change(); 
});

.block { 
  display: block; 
  width: 100px; 
  height: 100px; 
  border: 3px solid transparent; 
} 
 
.class-A { 
  background: red; 
} 
 
.class-B { 
  background: blue; 
} 
 
.class-1 { 
  border-color: yellow; 
} 
 
.class-2 { 
  border-color: green; 
} 
 
.class-3 { 
  border-color: gray; 
} 
 
.class-4 { 
  border-color: violet; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block class-A class-1"></div> 
 
<select id="changeOneClass"> 
  <option>class-A</option> 
  <option>class-B</option> 
</select> 
 
<select id="changeTwoClass"> 
  <option>class-1</option> 
  <option>class-2</option> 
  <option>class-3</option> 
  <option>class-4</option> 
</select>