Question

我对结果有疑问，我已经厌倦了解决。

HTML

<input type="checkbox" class="check" checked="checked" />
<input type="checkbox" class="check" />

的 JQUERY

$.fn.op_checkbox = function() {
    $(this).hide();
    $(this).wrap('<div class="op_checkbox"></div>');
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>');
    if($(this).is(':checked')) {
        $('.op_check_on_off').addClass('op_check_on');
    }
    else {
        $('.op_check_on_off').addClass('op_check_off');
    }
}
$(document).ready(function() {
    $('.check').op_checkbox();
});

结果

<div class="op_checkbox">
    <input class="check" type="checkbox" checked="checked" style="display: none;">
    <div class="op_check_on_off op_check_on">&nbsp;</div>
</div>
<div class="op_checkbox">
    <input class="check" type="checkbox" style="display: none;">
    <div class="op_check_on_off op_check_on">&nbsp;</div>
</div>

第一个复选框的结果复制在第二个复选框中，结果应为：

<div class="op_checkbox">
    <input class="check" type="checkbox" checked="checked" style="display: none;">
    <div class="op_check_on_off op_check_on">&nbsp;</div> <!-- on here -->
</div>
<div class="op_checkbox">
    <input class="check" type="checkbox" style="display: none;">
    <div class="op_check_on_off op_check_off">&nbsp;</div> <!-- off here -->
</div>

这是什么原因和问题？谢谢你的帮助

Answer 1

函数this内部的op_checkbox()是类似数组的jQuery对象，所以你应该用这样的循环处理每个对象：

$.fn.op_checkbox = function() {
    this.each(function(){
        var $this = $(this);

        $this.hide()
             .wrap('<div class="op_checkbox"></div>')
             .parent().append('<div class="op_check_on_off">&nbsp;</div>');

        if($this.is(':checked')) {
            $this.parent().find('.op_check_on_off').addClass('op_check_on');
        }
        else {
            $this.parent().find('.op_check_on_off').addClass('op_check_off');
        }
    });    
}
$(document).ready(function() {
    $('.check').op_checkbox();
});

我重构了一些代码。

在fn函数内部，this已经是jQuery对象，因此您不需要像$(this)那样换行。
使用jQuery链。
缓存$(this)。这可以提高性能（虽然它的改进很小）。

Answer 2

我认为您的代码目前存在两个问题。 Sangdol帮助解决了$（this）的范围问题，当你添加这个类时，Shankar帮助解决了你的选择器问题。 http://jsfiddle.net/rkw79/DZYFN/

$('.check').each( function() {
    $(this).hide();
    $(this).wrap('<div class="op_checkbox"></div>');
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>');
    if($(this).is(':checked')) {
        $(this).parent().find('div').addClass('op_check_on');
    }
    else {
        $(this).parent().find('div').addClass('op_check_off');
    }
})

Answer 3

试试这个

$.fn.op_checkbox = function() {
    $(this).hide();
    $(this).wrap('<div class="op_checkbox"></div>');
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>');
    if($(this).is(':checked')) {
        $(this).parent().find('.op_check_on_off').addClass('op_check_on');
    }
    else {
        $(this).parent().find('.op_check_on_off').addClass('op_check_off');
    }
}
$(document).ready(function() {
    $('.check').op_checkbox();
});

jquery每个或自定义复选框问题

3 个答案: