С помощью jQuery, чтобы задать класс элементу, соответствующий выбранной радио-кнопки


Я немного Ньют с jQuery, но могу заставить его работать, чтобы выполнить тот функционал, который я после.

Ниже функция проверяет значение входного радио-и затем добавляет класса, в зависимости от выбора. Но кажется, что есть более эффективный способ написания этого.

$('input[name=choice]').change(function(){
 var inputVal = $('input[name=choice]:checked').val();
     
 if(inputVal == 'Option A') {
  $(".img-wrapper").addClass('option-a');
 } else {
  $(".img-wrapper").removeClass('option-a');
 }
 
 if(inputVal == 'Option B') {
  $(".img-wrapper").addClass('option-b');
  $(".img-wrapper").removeClass('option-a');
 } else {
  $(".img-wrapper").removeClass('option-b');
 }

 if(inputVal == 'Option C') {
  $(".img-wrapper").addClass('option-c');
  $(".img-wrapper").removeClass('option-a');
 } else {
  $(".img-wrapper").removeClass('option-c');
 }

 if(inputVal == 'Option D') {
  $(".img-wrapper").addClass('option-d');
  $(".img-wrapper").removeClass('option-a');
 } else {
  $(".img-wrapper").removeClass('option-d');
 }
});
<div class="view-choice">
   <input type="radio" name="choice" value="Option A">
   <input type="radio" name="choice" value="Option B">
   <input type="radio" name="choice" value="Option C">
   <input type="radio" name="choice" value="Option D">    
</div>

<div class="img-wrapper option-a"></div>
 

https://jsfiddle.net/fhaLztL6/



145
2
задан 6 февраля 2018 в 11:02 Источник Поделиться
Комментарии
3 ответа

Как насчет 2 вкладыша решение, где вы можете преобразовать значение с помощью regex и toLowerCase() чтобы преобразовать значение в class имя и вместо того, чтобы создавать отдельные чеки на каждый вариант, где вам придется обновлять код каждый раз параметры увеличение если они приходят из базы данных.

$('input[name=choice]:checked').val().toLowerCase().replace(/\s+/, "-");

Вы должны переопределить все классы и просто предоставить стандартный класс с выбрана так, а не через

$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');

используя следующий подход переопределяет ранее применяла class и добавляет новые class.

.attr('class','img-wrapper '+className);

Так что все ваши код сумма до 3 линий.

$('input[name=choice]').change(function() {
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/\s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
});



$('input[name=choice]').change(function() {
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/\s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
});

.img-wrapper {
background-color: #000 !important;
width: 50px;
height: 50px;
}

.option-a {
background-color: #E91E63 !important;
}

.option-b {
background-color: #607D8B !important;
}

.option-c {
background-color: #FF9800 !important;
}

.option-d {
background-color: #4CAF50 !important
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>

<div class="img-wrapper"></div>




0
ответ дан 7 февраля 2018 в 10:02 Источник Поделиться

Вы можете использовать метки для радио входов и использовать фактические имена классов для значений. Потом на смену, вы бы просто удалить все параметры занятия и сдать в inputVal для класса добавить. См. Фрагмент ниже (цвета добавлены в классы с помощью CSS и текст добавлено .Гуи-обертки, чтобы показать его работы).



$('input[name=choice]').change(function(){
var inputVal = $('input[name=choice]:checked').val();

$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
});

.option-a
{
color: red;
}

.option-b
{
color: green;
}

.option-c
{
color: blue;
}

.option-d
{
color: yellow;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>

<div class="img-wrapper option-a">Blah</div>




1
ответ дан 6 февраля 2018 в 03:02 Источник Поделиться

Есть полезный jQuery метод, названный toggleClass. Вместо:

if(inputVal == 'Option A') {
$(".img-wrapper").addClass('option-a');
} else {
$(".img-wrapper").removeClass('option-a');
}

вы можете просто написать:

$(".img-wrapper").toggleClass('option-a', inputVal == 'Option A');

1
ответ дан 6 февраля 2018 в 04:02 Источник Поделиться