Question

我有一个为父div创建内部div的函数。它接收2个参数：“div_id”和“visitor_entered”。该函数还在其中一个创建的div中放置一个复选框，并将其替换为带有背景图像的div。当我点击div时 - 它会改变背景图像。我是这样做的：

$("#checkbox_"+div_id).each(function(){
        $(this).hide().after("<div class='class_checkbox' id='visitor_entered_"+div_id+"' />");
    });

$("#visitor_entered_"+div_id).on('click',function(){
        $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
    });

我现在想要的是，当此函数运行时，检查“visitor_entered”是否等于1，如果是，则将“#checkbox _”+ div_id div设置为“checked”。我这样试过：

if(visitor_entered==1)
    {
        alert("1, true!");
        $("#visitor_entered_"+div_id).prop('checked',$(this).is('.checked'));
    }

它在需要时发出警报，但没有设置要检查的div。那我怎么能这样做呢？

的的 **编辑**

整个功能：

function create_inner_divs(div_id, visitor_entered){
    for(var i=0; i<6; i++){
        divs_array[i] = div_id*10+i;
        var div_width = 704/6;
        $("<div id='"+divs_array[i]+"' style='width:"+div_width+
            "px; float:right; word-wrap:normal; word-break:break-all; padding:0 2px 0 2px;'>&nbsp;</div>").appendTo("#div_visitor_"+div_id);
    }

    $("<div id='div_visitor_entered_"+div_id+"' class='div_visitor_entered'><input name='checkbox_visitor_entered' type='checkbox' id='checkbox_"+div_id+"' class='input_class_checkbox'></div>").
        appendTo("#div_visitor_"+div_id);
    $("<div id='div_print_voucher_icon' class='div_print_voucher_icon'></div>").
        appendTo("#div_visitor_"+div_id);
    $("<div id='delete_visitor' class='delete_visitor'></div>").
        appendTo("#div_visitor_"+div_id);

    $("#checkbox_"+div_id).each(function(){
        $(this).hide().after("<div class='class_checkbox' id='visitor_entered_"+div_id+"' />");
    });

    $("#visitor_entered_"+div_id).on('click',function(){
        $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
    });

    if(visitor_entered==1)
    {
        alert("1, true!");
        $("#visitor_entered_"+div_id).prop('checked',$(this).is('.checked'));
    }

}

Answer 1

我认为你使用错误的伪选择器进行“检查”。请尝试$(this).is(':checked')而不是.checked。该点适用于类。

如果您正在寻找课程，请执行$(this).hasClass('.checked')

使用演示代码

更新：

您需要切换这样的复选框：

// your click handler for the div
$("#visitor_entered_"+div_id).on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));

    // get the checkbox id
    var checkbox_id = this.id.replace("visitor_entered_", "checkbox_");
    var checkbox = $('#' + checkbox_id);

    // toggle the checkbox
    if (checkbox.is(':checked')) {
        // uncheck it
        checkbox.removeAttr('checked');
    } else { 
        // check it
        checkbox.attr('checked', 'checked');
    }
});

Answer 2

啊哈！我想我有它！

    if (visitor_entered == 1) {
        alert("1, true!");
        // in here, you're trying to set a "checked" property ... on a DIV
        // because of that, you are not getting anything, because no such
        // property belongs to the div entity.
        // the only reason the code in your click event handler appears to work
        // is that you are also toggling the class on the div at the 
        // same time that you are attempting to change the property
        $("#visitor_entered_" + div_id).prop('checked', $(this).is('.checked'));
    }

你需要管理两个元素的状态......做这样的事情，而不是：

    if (visitor_entered == 1) {
        alert("1, true!");
        var veDiv = $("#visitor_entered_" + div_id);
        // first, toggle the class on the related checkbox:
        veDiv.toggleClass('checked');
        // second, find the sibling checkbox
        var veChk = veDiv.prev('[type=checkbox]');
        // NOW set that checkbox's checked property... which
        // DOES NOT accept a boolean value... it must be either
        // blank (not-checked) or 'checked'
        veChk.prop('checked', (veChk.is(':checked'))? '':'checked');
    }

（抱歉......从您的代码中复制并粘贴无法解决问题）

这是做太多链接的缺点之一......很容易假设你在链条的每个部分都碰到了正确的物体。当您开始遇到问题时，请将其分解，以便您可以单独测试路径上的每个假设。我可能会像你这样处理你的点击：

    $("#visitor_entered_" + div_id).on('click', function () {
        // you already have a reference to the clicked div, so get its
        // immediate predecessor checkbox
        var myChk = $(this).prev('[type=checkbox]');
        // toggle the div's class
        $(this).toggleClass('checked');
        // and then toggle the checkbox's checked property
        myChk.prop('checked', (veChk.is(':checked'))? '':'checked');
    });

（必须对您的onclick代码应用与上述代码相同的修复程序...）

祝你好运！

自动设置复选框，将div替换为“已选中”

2 个答案: