用于弹出式切换div代码中的选定项。
用于弹出式切换div代码中的选定项。
提问于 2016-07-20 17:29:52
我的问题对我来说似乎很复杂。所以我需要你们朋友的帮助。我会尽力解释的。
Image1:
在上面的图像中，如果用户单击"+Add/Edit“，就会出现一个弹出窗口，如image2下面所示。
Image2:
如果用户从弹出窗口中选择任何医疗条件，它将显示在页面上，如image3下面所示
Image3:
上述功能的HTML and script code在这里(请忽略只用于代码的小提琴的结果)：https://jsfiddle.net/kirankapur/cr6t1tds/
现在我要增加一个新的功能。
Image4:
如果我们从Image2中选择任何医疗条件，那么“家庭医疗史”部分将如Image4中所示。例如：“老年痴呆症”和“哮喘”被选中，所以当我们点击弹出式按钮(完成)，然后出现“家庭病史”部分(这应该按照选择/取消选择)，其中每一个都有另一个'+Add/Edit‘。单击此“+Add/Edit”后，将打开另一个弹出窗口，如Image5下面所示。
Image5:
Image5弹出的“家庭医疗历史”部分条目相同，但每个条目都可以有不同的用户输入。在Image5弹出后，用户选择结果应该如下所示
Image6:
问题：我不知道如何实现在Image4、Image5和Image6中解释的新功能。
有人能帮我吗？(很抱歉问了这么长的问题)
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-20 23:49:56
这里 --您可以在纯JQuery和HTML中找到一个快速弹琴样品 (没有结构，没有数据持久性)，代码不那么优雅(可以改进和简化)，但是可以给您一个关于如何获得所需行为的想法。
<div id="dlgMedical" style="display:none;">
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item"><input type="checkbox" value="None"> None</li>
<li class="list-group-item"><input type="checkbox" value="Depression"> Depression</li>
<li class="list-group-item"><input type="checkbox" value="Lung cancer"> Lung cancer</li>
<li class="list-group-item"><input type="checkbox" value="Anxiety"> Anxiety</li>
<li class="list-group-item"><input type="checkbox" value="Stroke"> Stroke</li>
</ul>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<button class="btn btn-block btn-warning btn-lg" id="cmdDiseaseDone">
DONE
</button>
</div>
</div>
</div>
</div>
<div id="dlgParents" style="display:none;">
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item"><input type="checkbox" value="Mother"> Mother</li>
<li class="list-group-item"><input type="checkbox" value="Father"> Father</li>
<li class="list-group-item"><input type="checkbox" value="Brother"> Brother</li>
<li class="list-group-item"><input type="checkbox" value="Sister"> Sister</li>
<li class="list-group-item"><input type="checkbox" value="Uncle"> Uncle</li>
</ul>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<button class="btn btn-block btn-warning btn-lg" id="cmdParentsDone">
DONE
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="panel-title bold">FAMILY MEDICAL HISTORY CONDITION(S)</div>
<h5>Select medical condition(s)</h5>
<a id="addDisease">+ Add/Edit</a>
</div>
</div>
<div class="row"> </div><div class="row"> </div>
<div class="row">
<div class="col-xs-12">
<div class="panel-title bold">FAMILY MEDICAL HISTORY</div>
<h5>Select patient's family members</h5>
<div id="divDisease"></div>
</div>
</div>
</div>CSS
.noTitleStuff .ui-dialog-titlebar {display:none;}
.bold{font-weight: bold;}
.item{font-style: italic;}
.addParent{padding:5px;}Javascript
$("#dlgMedical").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind",dialogClass: 'noTitleStuff', width:400});
$("#dlgParents").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind",dialogClass: 'noTitleStuff', width:400});
$( "#addDisease" ).click(function() {
$("#dlgMedical").dialog( "open" );
});
$( "#cmdDiseaseDone" ).click(function() {
// clear selection
$('#divDisease').empty();
// iterate selected disease
$( "li > input:checked" ).each(function( index ) {
// add history elements
var newID = $( this ).attr('value').replace(' ','_');
$('#divDisease').html($('#divDisease').html() + '<div class="row"><div class="col-xs-12"><div class="item">'+$( this ).attr('value')+'</div></div></div><div id="div'+newID+'"></div><div class="row"><div class="col-xs-12"><a id="'+newID+'" class="addParent">+ Add/Edit</a></div></div><div class="row"> </div>');
$( ".addParent" ).click(function(e) {
selectedItem = $(e.target).attr('id');
$("#dlgParents").dialog( "open" );
});
});
// clear checked
$( "li > input:checked" ).each(function( index ) {
$( this ).prop('checked',false);
});
$("#dlgMedical").dialog( "close" );
});
var selectedItem;
$( "#cmdParentsDone" ).click(function() {
// clear selection
var selectedDIV = $('#div'+selectedItem);
selectedDIV.empty();
// iterate selected disease
selectedDIV.html('<ul>');
$( "li > input:checked" ).each(function( index ) {
selectedDIV.html(selectedDIV.html() + '<li class="item">'+$( this ).attr('value')+'</li>');
});
selectedDIV.html(selectedDIV.html() + '</ul>');
// clear checked
$( "li > input:checked" ).each(function( index ) {
$( this ).prop('checked',false);
});
$("#dlgParents").dialog( "close" );
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38487083
复制相关文章
相似问题
腾讯云开发者
