Как заменить class, а не добавить\удалить его

205
22 июня 2017, 05:09

При выполнение следующего кода

$('#one, #two').on('change', function(){ 
		var one = $('#one').val(); 
    var two = $('#two').val(); 
    $('#get').html(one + ',' + two); 
     
    ////////////////////// 
     
    var str = $('#get').text(); 
		var arr = str.split(','); 
  	$('.test').text('class="block '+ arr[0] +' ' + arr[1] +'"'); 
		$('.block').addClass(''+ arr[0] +' ' + arr[1] +''); 
});
select {display: block; margin: 0 0 5px;} 
 
.block {display: block; padding: 10px 20px; background: red; border: 2px solid red;} 
 
.red   {background: red;} 
.blue  {background: blue;} 
.bred  {border-color: red;} 
.bblue {border-color: blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
Цвет 
<select id="one"> 
  <option value="red">Красный</option> 
  <option value="blue">Синий</option> 
</select> 
 
Обводка 
<select id="two"> 
  <option value="bred">Красная</option> 
  <option value="bblue">Синяя</option> 
</select> 
 
<textarea id="get">red,bred</textarea> 
 
<div class="test">class="block red bred"</div> 
 
<div class="block">block</div>

В .block возникает ошибка, блок становиться синего цвета и не меняется даже если выбрать красный.. Как решить?

Код в действие ссылка (jsfiddle)

Answer 1

Не знаю зачем столько манипуляций.

Задаешь строковую переменную, в которой будут лежать те классы, которые точно должны быть в div. Остальные просто собираешь в строку и добавляешь при изменении любого select, при этом очистив все предыдущие. Кмк проще сделать так:

$('select').on('change', function(){ 
    var constantClass = "block"; 
    var block  = $('.block'); 
    var chosenClasses = ''; 
    $('select').each(function(){ 
    	chosenClasses += ' '  + $(this).val(); 
    }); 
     
    console.log(chosenClasses); 
    block.removeClass(); 
    block.addClass(constantClass + chosenClasses); 
});
select {display: block; margin: 0 0 5px;} 
 
.block {display: block; padding: 10px 20px; background: red; border: 2px solid red;} 
 
.red   {background: red;} 
.blue  {background: blue;} 
.bred  {border-color: red;} 
.bblue {border-color: blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
Цвет 
<select id="one"> 
  <option value="red">Красный</option> 
  <option value="blue">Синий</option> 
</select> 
 
Обводка 
<select id="two"> 
  <option value="bred">Красная</option> 
  <option value="bblue">Синяя</option> 
</select> 
<!-- 
<textarea id="get">red,bred</textarea> 
<div class="test">class="block red bred"</div> 
--> 
<div class="block">block</div>

READ ALSO
Почему не срабатывает метод &ldquo;delay&rdquo; (jQuery)?
jQuery

Почему не срабатывает метод “delay” (jQuery)?

 281
Передать строку в функцию [дубликат]
jQuery

Передать строку в функцию [дубликат]

На данный вопрос уже ответили:

 239
Как убрать &lt;script src="libs/&hellip;/&hellip;js&lt;/script&gt;
jQuery

Как убрать <script src="libs/…/…js</script>

Всем привет! Подскажите возможно ли отключить скрипт, который вызывает всплывающий модальный диалог, при уходе посетителя с сайта

 240
transition не работает
CSS

transition не работает

Есть такой кодСмотрится тут он криво, но суть в том, что при нажатии input блок section становится видимым, но, я хочу, чтобы появлялся блок с эффектом...

 365