Hey guys i'm trying to make jquery code to change the icon's class by selecting radio input that has the value of class but the problem is its add the class vale to all others icons class's
here my code: HTML
<div class="select-container">
<input type="radio" value="icon-home">
<input type="radio" value="icon-car">
<input type="radio" value="icon-sky">
<input type="radio" value="icon-color">
</div>
<div class="container-icons">
<a>
Home Icon: <i class="icon"></i> <button class="select"></button>
</a>
<a>
Car Icon: <i class="icon"></i> <button class="select"></button>
</a>
<a>
Sky Icon: <i class="icon"></i> <button class="select"></button>
</a>
<a>
color Icon: <i class="icon"></i> <button class="select"></button>
</a>
</div>
Jquery:
<script>
jQuery('body').on('click' , '.select' , function() {
jQuery('.select-container').show();
$('.select-container').on('change', function () {
var icon_value = $("input[type='radio'][name='icon']:checked").val();
$('.icon').addClass(icon_value);
});
});
</script>
On click, use .index to get the index of the selected radio among its siblings. Then with .eq, you can select the same index of the .icons and add the appropriate class.
$('.select-container input').on('change', function() {
const value = $(this).val();
const index = $(this).index();
console.log(index);
$('.icon').eq(index).addClass(value);
});.icon-home {
background: green;
}
.icon-car {
background: yellow;
}
.icon-sky {
background: blue;
}
.icon-color {
background: orange;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-container">
<input type="radio" value="icon-home">
<input type="radio" value="icon-car">
<input type="radio" value="icon-sky">
<input type="radio" value="icon-color">
</div>
<div class="container-icons">
<a>
Home Icon: <i class="icon">A</i> <button class="select"></button>
</a>
<a>
Home Car: <i class="icon">A</i> <button class="select"></button>
</a>
<a>
Home Sky: <i class="icon">A</i> <button class="select"></button>
</a>
<a>
Home color: <i class="icon">A</i> <button class="select"></button>
</a>
</div>If you wanted to make only one radio button selected at a time, add the same name attribute to all the radio buttons.