Hola chicos, estoy tratando de hacer un código jquery para cambiar la clase del ícono seleccionando la entrada de radio que tiene el valor de la clase, pero el problema es que agrega el valor de la clase a todas las demás clases de íconos.
aquí mi código: 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>Al hacer clic, use .index para obtener el índice de la radio seleccionada entre sus hermanos. Luego, con .eq , puede seleccionar el mismo índice de los .icon y agregar la clase apropiada.
$('.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> Si desea seleccionar solo un botón de radio a la vez, agregue el mismo atributo de name a todos los botones de radio.