jQuery:单击更改类

Question

我有一系列复选框，我想让它们对移动设备更加友好，所以我隐藏了复选框并使用标签作为按钮。我想要做的是通过在用户点击时将标签的颜色从黄色更改为绿色，然后在再次点击时恢复为黄色来向用户提供反馈。我急于想明白为什么我使用的东西不起作用。

<div id="div">
    <label for="checkbox" id="label1" class="bg-warning text-center pointer" style="width:100px; padding:8px">
            <input type="checkbox" name="checkbox1" id="checkbox1" value="checked1" style="display:none">test
        </label>
    </div>

    <label for="checkbox" id="label2" class="bg-warning text-center pointer" style="width:100px; padding:8px">
            <input type="checkbox" name="checkbox2" id="checkbox2" value="checked2" style="display:none">test
        </label>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('#div').on('click', function(e) {
            $('#div').each( function( index, element) {

                var el = $(element);

                if($(el).hasClass('bg-warning')) {
                    $(el).removeClass('bg-warning').addClass('bg-success');
                } else {
                    $(el).removeClass('bg-success').addClass('bg-warning');
                }
            });
        });
    });
</script>

Answer 1

首先，我会给 div 唯一的 ID。然后你可以为它们设置一个公共(public)类(即:div):

<div id="div1" class="div">
    <label for="checkbox" id="label1" class="bg-warning text-center pointer" style="width:100px; padding:8px">
        <input type="checkbox" name="checkbox1" id="checkbox1" value="checked1" style="display:none" />test
    </label>
</div>
<div id="div2" class="div">
    <label for="checkbox" id="label2" class="bg-warning text-center pointer" style="width:100px; padding:8px">
        <input type="checkbox" name="checkbox2" id="checkbox2" value="checked2" style="display:none" />test
    </label>
</div>

...

$(document).ready(function () {
    $('.div').on('click', function (e) {
        // Find the labels within the clicked div.
        var el = $('label', this);

        // Toggle their classes.
        // No loop needed, as the selector will bring all the elements
        // and apply the change to each one of them.            
        $(el).toggleClass('bg-warning').toggleClass('bg-success');
    });
});

Demo

更新

在我们在评论中聊天之后，我认为您还有另外两个选择。

记得使用 #设置 for 时标签的属性(即:for="#checkbox2")。

首先，您不断检查 div 中的点击/点击:

$(function () {    
    $('.div').on('click', function () {
        var label = $('label', this);
        var checkbox = $('input[type=checkbox]', this);

        label.toggleClass('bg-warning bg-success');

        // Checking the label class and deciding if we
        // need to check the checkbox.
        checkbox.prop('checked', label.hasClass('bg-success'));
    });

    $('label input[type=checkbox]').on('click', function(e) {
        // As what's actually clicked is the label, let's
        // ignore the default behavior.
        e.preventDefault();

        // And transfer the click to the div itself.
        $(this).parents('.div').trigger('click');        
    });
});

Demo

其次，您只需处理标签中的点击/点击(我推荐):

$(function () {    
    $('label').on('click', function () {
        $(this).toggleClass('bg-warning bg-success')
            .find('input[type=checkbox]')
            .prop('checked', $(this).hasClass('bg-success'));
    });
});

Demo