0

我正在尝试制作一个 jquery 脚本，如果单击复选框，则值将附加到 div 中，如果要从 div 中删除值，则可以单击它并显示带有选定复选框的灯箱。

这是 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 发送/删除 div 值工作正常。第二个事件 div onclick 启动灯箱也在工作

这是第一个事件的 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 插入实际上都没有出现在我页面的源代码中

那么是否有可能由于内容在物理上不存在，代码无法工作？

我问是因为 html 插入，即 lightbox 和 #fasta_reader 都是通过单击页面的物理内容来加载的。所以实际上这两个元素在视觉上是相互链接的，但在物理上链接到页面上的内容。

请告知我在这方面是否正确，以及使该过程正常工作的可能解决方案是什么，即 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 回答