Question

对我来说，我的问题似乎很复杂。所以我需要你朋友的帮助。我会试着解释一下。

IMAGE1：

在上图中，如果用户点击＆＃34; +添加/编辑＆＃34;然后出现一个类似于image2的弹出窗口。

图像2：

如果用户从弹出窗口中选择任何医疗状况，它将显示在页面上，如下图3所示

的Image3：

上述功能的HTML and script code就在这里（请忽略小提琴的结果，仅用于代码）：https://jsfiddle.net/kirankapur/cr6t1tds/

现在我需要添加一个新的功能。

图像4：

如果我们从 Image2 中选择任何健康状况，那么＆＃34;家庭病史＆＃34; 应显示 Image4 中显示的部分。例如＆＃39;老年痴呆症＆＃39;和＆＃39;哮喘＆＃39;当我们点击弹出按钮（完成）然后＆＃34;家庭病历＆＃34;部分出现（这应按照选择/取消选择切换），其中每个部分都有另一个＆＃39; +添加/编辑＆＃39;。点击这个＆＃39; +添加/编辑＆＃39;另一个弹出窗口将打开，如下所示 Image5 。

图像5：

Image5 弹出窗口将与＃34;家庭病历＆＃34;相同部分项目，但每个可以有不同的用户输入。在 Image5 弹出后，用户选择结果应如下图所示

Image6：

问题：我不知道如何实现Image4，Image5和Image6中解释的这一新功能。

任何人都可以帮助我吗？（对不起这个长问题）

Answer 1

Here你可以在纯JQuery和HTML中找到quick jsfiddle sample（没有结构，没有数据持久性），代码不是那么优雅（可以改进和简化）但是给你一个关于如何获得理想的行为。

<强> 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">&nbsp;</div><div class="row">&nbsp;</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">&nbsp;</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" );
  });

对于弹出式切换div代码

1 个答案: