0

親 div の内部 div を作成する関数があります。「div_id」と「visitor_entered」の 2 つのパラメーターを受け取ります。この関数はまた、これらの作成された div の 1 つにチェックボックスを配置し、それを背景画像のある 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');
    }

（申し訳ありません...コードからコピーして貼り付けても問題は解決しません）

これは、連鎖しすぎることの欠点の 1 つです... 連鎖の各部分で正しいオブジェクトをヒットしていると簡単に想定できます。問題が発生し始めたら、それを分割して、パスに沿って各仮定を個別にテストできるようにします。私はおそらくあなたのオンクリックを次のように処理したでしょう：

    $("#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 に答える