Как установить data- * атрибут checked radio в класс другого элемента с помощью jquery?

#javascript #jquery #html #css #custom-data-attribute

#javascript #jquery #HTML #css — код #пользовательский атрибут данных #css

Вопрос:

Как мне взять значение data-attribute отмеченного переключателя и вывести его внутри атрибута класса другого элемента?

Пожалуйста, взгляните на пример:

 body{
  background: #eee;
}  

.box{
  background: #000;
  margin: 40px;
  width: 200px;
  height: 200px;
}

.box.black{
  background: #000;
}

.box.white{
  background: #fff;
}

.box.green{
  background: #00d300;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-color="black" id="radio1" type="radio" name="radio" checked>
<label for="radio1">Black</label>
<input data-color="white" id="radio2" type="radio" name="radio">
<label for="radio2">White</label>
<input data-color="green" id="radio3" type="radio" name="radio">
<label for="radio3">Green</label>

<div class="box"></div>
<div class="box"></div>

Ответ №1:

Вы можете сделать это, используя только CSS. :checked выберите проверенный радио и общие селекторы. ~

 input[data-color="black"]:checked ~ .box {
    background: #000;
}

Показать фрагмент кода

 .box{
  background: #000;
  margin: 40px;
  width: 200px;
  height: 200px;
}

input[data-color="black"]:checked ~ .box {
  background: #000;
}

input[data-color="white"]:checked ~ .box {
  background: #fff;
}

input[data-color="green"]:checked ~ .box {
  background: #00d300;
}

 <input data-color="black" id="radio1" type="radio" name="radio" checked>
<label for="radio1">Black</label>
<input data-color="white" id="radio2" type="radio" name="radio">
<label for="radio2">White</label>
<input data-color="green" id="radio3" type="radio" name="radio">
<label for="radio3">Green</label>

<div class="box"></div>

Если вы хотите сделать это с помощью jquery, вам нужно получить значение data-color атрибута с помощью .attr() или .data() и установить его в класс .box использования .addClass() .

 $("input[name='radio']").change(function(){
    $(".box").removeClass().addClass("box "   $(this).attr("data-color"));
});

Показать фрагмент кода

 $("input[name='radio']").change(function(){
    $(".box").removeClass().addClass("box "   $(this).attr("data-color"));
});

 .box{
  background: #000;
  margin: 40px;
  width: 200px;
  height: 200px;
}

.box.black{
  background: #000;
}

.box.white{
  background: #fff;
}

.box.green{
  background: #00d300;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-color="black" id="radio1" type="radio" name="radio" checked>
<label for="radio1">Black</label>
<input data-color="white" id="radio2" type="radio" name="radio">
<label for="radio2">White</label>
<input data-color="green" id="radio3" type="radio" name="radio">
<label for="radio3">Green</label>
<div class="box"></div>