Javascript 如何创建卡片特有的对话框
当我将一张卡片添加到收件箱列表时,我可以双击它并弹出一个对话框窗口。在对话框窗口中,我可以从日历中选择一个日期,在输入字段中输入一个字符串值,并创建一个动态复选框。然后,当我按下按钮(获取值)时,值显示在卡上。这个很好用。当我向收件箱中添加另一张卡片并双击它打开对话框窗口时,问题就出现了,显示的是上一个对话框窗口中的相同值。我不想要它。 我希望每次我添加一张新卡,双击它时,对话框窗口都没有值 我认为解决办法可能是使卡片独一无二,但我不确定Javascript 如何创建卡片特有的对话框,javascript,jquery,css,html,Javascript,Jquery,Css,Html,当我将一张卡片添加到收件箱列表时,我可以双击它并弹出一个对话框窗口。在对话框窗口中,我可以从日历中选择一个日期,在输入字段中输入一个字符串值,并创建一个动态复选框。然后,当我按下按钮(获取值)时,值显示在卡上。这个很好用。当我向收件箱中添加另一张卡片并双击它打开对话框窗口时,问题就出现了,显示的是上一个对话框窗口中的相同值。我不想要它。 我希望每次我添加一张新卡,双击它时,对话框窗口都没有值 我认为解决办法可能是使卡片独一无二,但我不确定 请帮助我,并提供一些代码 HTML: 收件箱
请帮助我,并提供一些代码 HTML:
收件箱
标题
日期:
添加复选框
Jquery:
$(函数(){
//单击“功能”添加卡
var$div=$('').addClass('sortable-div');
$('Title
')。附录($div);
$('',{“type”:“text”,“class”:“ctb”});
$('',{“类型”:“文本”,“类”:“日期”});
var cnt=0,$currentTarget;
$('#AddCardBtn')。单击(函数(){
var$newDiv=$div.clone(true);
cnt++;
$newDiv.prop(“id”、“div”+cnt);
$('#userAddedCard')。追加($newDiv);
});
//双击打开模态对话框窗口
$('#userAddedCard').dblclick(函数(e){
$currentTarget=$(e.target);
$('modalDialog')。对话框({
莫代尔:是的,
身高:600,
宽度:500,
位置:'中心'
});
返回false;
});
$(“#datepicker”).datepicker({showWeek:true,firstDay:1});
$(“#Getbtn”)。在(“单击”,函数(){
var val=$(“#customTextBox”).val();
$currentTarget.find(“.ctb”).val(val);
$currentTarget.find(“.date”).val($(“#日期选择器”).val());
$('modalDialog')。对话框(“关闭”);
});
//添加一个新的复选框
$('#btnSaveCheckBox')。单击(函数(){
addCheckbox($('#checkBoxName').val();
$('#checkBoxName').val(“”);
});
函数addCheckbox(名称){
变量容器=$(“#modalDialog”);
var inputs=container.find('input');
变量id=输入。长度+1;
$('',{type:'checkbox',id:'cb'+id,value:name});
$(“”,{'for':'cb'+id,text:name});
$('
')。附加到(容器);
}
});
为您的代码添加我添加的行
$(函数(){
//单击“功能”添加卡
var$div=$('').addClass('sortable-div');
$('Title
')。附录($div);
$('',{“type”:“text”,“class”:“ctb”});
$('',{“类型”:“文本”,“类”:“日期”});
var cnt=0,$currentTarget;
$('#AddCardBtn')。单击(函数(){
var$newDiv=$div.clone(true);
cnt++;
$newDiv.prop(“id”、“div”+cnt);
$('#userAddedCard')。追加($newDiv);
//警报($('#userAddedCard').find(“div.sortable-div”).length);}))
//双击打开模式对话框窗口
$('#userAddedCard').dblclick(函数(e){
$currentTarget=$(e.target);
$('modalDialog')。对话框({
莫代尔:是的,
身高:600,
宽度:500,
位置:'中心'
});
返回false;
});
$(“#datepicker”).datepicker({showWeek:true,firstDay:1});
$(“#Getbtn”)。在(“单击”,函数(){
var val=$(“#customTextBox”).val();
$currentTarget.find(“.ctb”).val(val);
$currentTarget.find(“.date”).val($(“#日期选择器”).val());
document.getElementById('customTextBox')。value=”“;//添加此行
document.getElementById('datepicker')。value=”“;//添加此行
$('.allcheckbox').remove();//添加此行
$('modalDialog')。对话框(“关闭”);
});
//添加一个新的复选框
$('#btnSaveCheckBox')。单击(函数(){
addCheckbox($('#checkBoxName').val();
$('#checkBoxName').val(“”);
});
函数addCheckbox(名称){
变量容器=$(“#modalDialog”);
var inputs=container.find('input');
变量id=输入。长度+1;
$(“”,{type:'checkbox',class:'allcheckbox',id:'cb'+id,value:name}).appendTo(container);//添加属性类
$(“”,{for':'cb'+id,class:'allcheckbox',text:name}).appendTo(container);//添加属性类
$('
')。附加到(容器);
}
})) “请帮助我,并提供一些代码。”。。我们不为您提供一些代码。你必须了解它。索取代码总是一种不好的做法。我自己也试过,但我不知道怎么做。我不同意要求代码总是一种不好的做法。我总是能学到一些东西。你有什么办法来解决这个问题吗?在某种程度上,你需要给每张卡一个唯一的类别/id。你有一些链接吗,怎么做?我仍然有同样的问题。哦,我的错。对不起,我没看见。我想,当我双击卡片并从日历中选择日期时,在输入字段中输入一个字符串值并创建一个动态复选框。然后,在关闭对话框并再次双击同一张卡后,我希望在该对话框中显示相同的值,但问题是,当我双击它时,它是空的。稍后,当我添加新卡时,我希望对话框为空。你明白我什么意思吗?
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<p style="display: inline">Inbox</p>
<!--Button to add a Card-->
<input type="button" id="AddCardBtn" value="+ Add a Card..."/> <hr class="fancy-line"/> <br/>
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
</div>
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
<label>Add checkBox</label>
<br />
<div id="progressbar"></div>
<br />
<input type="text" id="checkBoxName" />
<input type="button" id="btnSaveCheckBox" value="_Ok" />
<br />
</form>
</div>
<!--Reference to Jquery-->
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
$("#Getbtn").on("click",function() {
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val() );
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name) {
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
$('<input />', { type: 'checkbox', id: 'cb' + id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb' + id, text: name }).appendTo(container);
$('<br/>').appendTo(container);
}
});
for your code add the lines that i added
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
$("#Getbtn").on("click",function() {
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val() );
document.getElementById('customTextBox').value="";//add this line
document.getElementById('datepicker').value="";//add this line
$('.allcheckbox').remove();//add this line
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name) {
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
$('<input />', { type: 'checkbox', class: 'allcheckbox', id: 'cb' + id, value: name }).appendTo(container);//add the attribute class
$('<label />', { 'for': 'cb' + id, class: 'allcheckbox', text: name }).appendTo(container);//add the attribute class
$('<br/>').appendTo(container);
}