如何獲取輸入值以添加為 jquery 中當前選定元素的類

Question

嘿伙計們，我正在嘗試通過選擇具有類值的無線電輸入來制作 jquery 代碼來更改圖標的類，但問題是它將類 vale 添加到所有其他圖標類的

這是我的代碼：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>

查詢：

<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>

Answer 1

單擊時，使用.index獲取所選電台在其兄弟姐妹中的索引。 然后使用.eq ，您可以選擇.icon的相同索引並添加適當的類。

 $('.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>

如果您想一次只選擇一個單選按鈕，請為所有單選按鈕添加相同的name屬性。