在 Laravel 中使用 javascript 创建控件

Question

我目前在 Laravel 的一个项目中工作，我必须为不同的疾病创建单选按钮来指定是/否的答案。在这里，我从控制器传递的数据库中获取疾病名称。

我创建了一个 php 数组，只是为了获得疾病的名称。

<?php $value=array();?>
@foreach($list as $disease)
<?php 
  $value[]=$disease->diseaseName; 
?>
@endforeach

diseaseList.blade.php

这是我的设计观点。在这种情况下，当单击按钮时，必须创建一个带有疾病名称的新单选按钮。

<div class="form-group">
<label>Patient ID &nbsp &nbsp &nbsp &nbsp<b style="font-size: 18px;">{{$id}} 
</b></label>
</div>
<input type="hidden" name="patient_id" value="{{$id}}">
<div class="form-group">
<label>Patient Name &nbsp<b style="font-size: 18px;">{{$name}}</b></label>
</div>
<input type="hidden" name="patient_name" value="{{$name}}">
<div class="field_wrapper">
<div>
<a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img 
style="padding-bottom: 15px;" src="../../images/add_btn.png"></a>
</div>
</div>

这是用于创建单选按钮的 javascript。

<script type="text/javascript">
$(document).ready(function(){
var values = new Array();
<?php foreach($value as $key => $val){ ?>
    values.push('<?php echo $val; ?>');
<?php } ?>

var maxField = values.length; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var x = 0; //Initial field counter is 1


var fieldHTML = '<div class="field_wrapper"><div class="label-group"><div 
class="line"></div><label style="font-weight: 900;" 
id="labelid">Disease</label></div><div class="form-check form-check-inline"> 
<input class="form-check-input" type="radio" name="Diabetes" 
id="inlineRadio1" value="Yes">&nbsp<label class="form-check-label" 
for="inlineRadio1">Yes</label></div><div class="form-check form-check- 
inline"><input class="form-check-input" type="radio" name="Diabetes" 
id="inlineRadio2" value="No">&nbsp<label class="form-check-label" 
for="inlineRadio2">No</label></div><div class="line"></div><div class="form- 
group" name="dName" value="dName"><input type="text" name="dName" id="dName" 
hidden size="5"><label name="dlabel" id="dlabel" hidden> mg/hg</label></div> 
</div>'; 

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
         var element=values[x];
         $(wrapper).append(fieldHTML); //Add field html
         document.getElementById("labelid").innerText = element;
         x++; //Increment field counter
    }
});
});

一切正常。问题是，当我第一次单击按钮时，名称为 Diabetes 的单选按钮已成功创建，而当我第二次按下该按钮时，先前创建的单选按钮 Diabetes 被重命名为 Disease（默认名称）并已创建具有第二个疾病名称 Hypertension 的新控件。

重复创建所有单选按钮。请给我一个解决方案。提前致谢。

Answer 1

我不得不对 HTML 结构进行更改：

<div class="field_wrapper"></div>
<div>
    <a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img style="padding-bottom: 15px;" src="../../images/add_btn.png"></a>
</div>

这样添加按钮不会在点击时消失。

在您的脚本中更改行：

$(wrapper).append(fieldHTML); //Add field html

收件人：

$(wrapper).prepend(fieldHTML); //Add field html

这里是 Codepen 的链接：https://codepen.io/anon/pen/NzbYyK?editors=1010