0

チェックボックスをクリックすると値がdivに追加され、divから値を削除したい場合はそれをクリックして、選択したチェックボックスを含むライトボックスが表示されるjqueryスクリプトを作成しようとしています。

これはhtmlマークアップです

これはライトボックスです

これは、ライトボックスにつながる div です

<div id="fasta_reader" class="hidden" style="height: 500px; width: 200px; border:2px solid #000000;">

<div id="test_boxes">
<input type="checkbox" name="vehicle" class="checkers" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" class="checkers" value="Car">I have a car <br>
<input type="checkbox" name="vehicle" class="checkers" value="gel">I have a gel <br>
<input type="checkbox" name="vehicle" class="checkers" value="gol">I have a gol<br>
<input type="checkbox" name="vehicle" class="checkers" value="feet">I have a feet<br>
<input type="checkbox" name="vehicle" class="checkers" value="hand">I have a hand <br>
<input type="checkbox" name="vehicle" class="checkers" value="ear">I have a ear<br>
<input type="checkbox" name="vehicle" class="checkers" value="nose">I have a nose <br>
</div>

最初のイベント、つまり '.checkers' onclick send/remove div 値は正常に機能しています。2番目のイベント div onclick fire up lightbox も機能しています

これが最初のイベントのjqueryです

$(document).ready(function(){
$('.checkers').click(function(){
if (this.checked) 
{
var div_val = $.trim($("#fasta_reader").text());
var check_val = $(this).val();
var box_val = '<span class="box_breaks"><input type="checkbox"class="lightbox_checkbox" name="lightbox_val" id='+check_val+'_checkbox'+' value='+check_val+'>'+check_val+'</input></span>';
var div_class = $("#fasta_reader").attr("class");
if(div_val == "" && div_class == "hidden")
{
var new_val = div_val + check_val;
$("#fasta_reader").removeClass("hidden");
$("#fasta_reader").append(new_val);
}
else if(div_val != "" && div_class != "hidden")
{
var new_val = " "+check_val;
$("#fasta_reader").append(new_val);
}
$('.box').append(box_val);
$("#"+check_val+"_checkbox").prop('checked',true);
}
else if(!(this.checked))
{
var check_val = $(this).val();
var div_val_index = $.trim($("#fasta_reader").text()).indexOf(check_val);
var div_val = $.trim($("#fasta_reader").text());
var box_id = "#"+check_val+'_checkbox';
$(box_id).parent('span').remove();

if(div_val_index > 0)
{
var new_val = div_val.replace(" "+check_val, "");
$("#fasta_reader").text(new_val);
}
else
{
div_val = div_val.replace(check_val, "");
$("#fasta_reader").text(div_val);
}
}
if(div_val == "" && div_class != "hidden")
{
$("#fasta_reader").addClass("hidden");
}

});
});

これは、ライトボックスの onclick イベント ハンドラのコードです。

$(document).ready(function(){
            $('.lightbox_checkbox').click(function(){
            alert("HEHE");
            if(!(this.checked))
            {
            $("#test_boxes input:checkbox[value="+this_val+"]").attr("checked", false);
            }
            else if(this.checked)
            {
            $("#test_boxes input:checkbox[value="+this_val+"]").attr("checked", true);
            }
            });
            });

これは動作していないイベントです ドキュメントの準備を .lightbox_checkbox 読み込み関数に変更しようとしましたが、動作しませんでした。

if else ステートメントも削除しましたが、アラートは発生しません。アラートステートメントが起動しないのはなぜですか?

また、jquery で行った html 挿入は、ページのソース コードに実際には表示されませんでした。

コンテンツが物理的に存在しないため、コードが機能しない可能性はありますか?

ページの物理コンテンツをクリックすると、ライトボックスと #fasta_reader の両方の html 挿入が読み込まれるためです。したがって、実際には、これらの要素は両方とも視覚的に相互にリンクされていますが、ページに存在するコンテンツに物理的にリンクされています。

この点で私が正しいかどうかをアドバイスしてください。また、プロセスを機能させるための可能な解決策は何ですか。つまり、jqueryによって生成されたライトボックスチェックボックスonclick開始イベント

4

1 に答える 1

0

変数 box_val には、プレーンな html を直接使用しないでください。代わりに、$.html() を使用して DOM 要素を作成し、HTML 値を挿入します。

私は次のように使用しています：

var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.setAttribute("align","center");
$(td1).html(executeFormatter());
tr.appendChild(td1);
$("#tableBody").append(tr);

私のexecuteFormatterは次のようになります:

function executeFormatter(){
    return html = "<span onclick=\"clickFunc()\" class=\"ui-icon ui-icon-circle-triangle-e\" style=\"cursor:pointer;\" height=\"16\" width=\"16\" ></span>";
}

そして、私にとって完璧に機能しています。

よろしく、アミット

于 2013-04-15T06:35:08.593 に答える