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

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 >
    <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 >
    <a>
        Home Icon: <i ></i> <button ></button>
    </a>
    <a>
        Car Icon: <i ></i>  <button ></button>
    </a>
    <a>
        Sky Icon: <i ></i>  <button ></button> 
    </a>
    <a>
        color Icon: <i ></i> <button ></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>

CodePudding user response：

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 >
  <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 >
  <a>
        Home Icon: <i >A</i> <button ></button>
    </a>
  <a>
        Home Car: <i >A</i>  <button ></button>
    </a>
  <a>
        Home Sky: <i >A</i>  <button ></button> 
    </a>
  <a>
        Home color: <i >A</i> <button ></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.