0

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

$('#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)

1

1 ответ 1

2

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

Задаешь строковую переменную, в которой будут лежать те классы, которые точно должны быть в 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>

4
  • Вах, то что надо. Спасибо.
    – De.Minov
    20 июн 2017 в 11:22
  • Мне всё равно нужно получать значения select в textarea.. Но это я уже сам реализую (надеюсь).
    – De.Minov
    20 июн 2017 в 11:25
  • @CbIPoK2513 ну для textarea можно писать так chosenClasses.split(' ').join(',') - даст строку разделенную запятыми 20 июн 2017 в 11:29
  • спасибо ещё раз)
    – De.Minov
    20 июн 2017 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.