0

我有一个为父 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'));
    }

}
4

2 回答 2

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');
    }
});
于 2013-06-20T15:51:46.073 回答
0

啊哈！我想我有！

    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 代码应用与上述代码相同的修复...）

祝你好运！

于 2013-06-20T17:01:32.183 回答