我想制作一个按钮来添加新项目行:
这是 create.blade.php 中的 HTML
<div class="createOrderForm" id="orderMenuItems">
<div class="orderItem">
<label> Item : </label>
<select name="item[]" required>
<option value="">Menu Items</option>
@foreach ($menuItems as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
@endforeach
</select>
<label>Quantity :</label>
<input type="text" name="quantity[]" value="" required>
</div>
</div>
这是包含的 create.js :
$(document).ready(function () {
console.log("Welcome To create order Page");
var addItem = $('#addItem');
var orderMenuItems = $('#orderMenuItems');
$(addItem).click(function(e){
var newItem = '<div class="orderItem">';
newItem += '<label> Item : </label>';
newItem += '<select name="orderItem[]">';
newItem += '<option value="">Menu Items</option>';
newItem += "@foreach ($menuItems as $item)";
var itemID = "{!! $item->id !!}";
newItem += '<option value="'+ itemID +'">'+ itemID +'</option>';
newItem += "@endforeach";
newItem += '</select>';
newItem += '<label>Quantity :</label>';
newItem += '<input type="text" name="quantity[]" value="" required>';
newItem += '</div>';
$(orderMenuItems).append(newItem);
});
});
按钮可以工作并添加新行,但新行中的菜单项有问题:
我认为问题出在这里:
newItem += "@foreach ($menuItems as $item)";
var itemID = "{!! $item->id !!}";
newItem += '<option value="'+ itemID +'">'+ itemID +'</option>';
newItem += "@endforeach";
我尝试使用:
@foreach ($menuItems as $item)
....
@endforeach
而不是:
newItem += "@foreach ($menuItems as $item)";
....
newItem += "@endforeach";
但它不起作用。
我该如何解决它?
最佳答案
我没有 Laravel 经验,但我猜它根本不负责 js 文件。
我不喜欢这种将标记存储在两个地方的方法。一次在 html 中,一次在 JS 中的 String 中。而且你必须保持这两个地方同步。
我可以建议一种不同的方法吗:
在create.blade.php中:
<div class="createOrderForm" id="orderMenuItems">
<div class="orderItem">
<label> Item : </label>
<select name="item[]" required>
<option value="">Menu Items</option>
@foreach ($menuItems as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
@endforeach
</select>
<label>Quantity :</label>
<input type="text" name="quantity[]" value="" required>
</div>
</div>
模板可以位于页面中的任何位置,所以为什么不将其存储在使用它的位置旁边
在 create.js 中
$(document).ready(function () {
console.log("Welcome To create order Page");
var $addItem = $('#addItem');
var $orderMenuItems = $('#orderMenuItems');
$addItem.click(function(){
var markup = $orderMenuItems.children('.orderItem')[0].outerHTML;
$orderMenuItems.append(markup);
});
});
关于javascript - 在 Laravel 5.3 中使用 Javascript 中的 Foreach 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46729959/