How get input value to add as class for current selected element in jquery

Question

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>

CertainPerformance · Accepted Answer · 2022-07-08 15:42:18Z

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.

Collectives™ on Stack Overflow

How get input value to add as class for current selected element in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related