在 Laravel 5.3 中使用 Javascript 中的 Foreach 循环答案

【问题标题】：Use Foreach Loop in Javascript with Laravel 5.3在 Laravel 5.3 中使用 Javascript 中的 Foreach 循环
【发布时间】：2018-03-25 14:13:19
【问题描述】：

我想制作一个按钮来添加新的项目行：

这是 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";

但它不起作用。

我该如何解决？

【问题讨论】：

我认为这是因为你混合了 php 和 javascript 所以 {!! $item->id !!} 没有得到 php 的回显，而是设置为字符串。
那么，我应该怎么做才能让它工作呢？ @Mr.Greenwoodz
类似 var itemID = 'id ?>;';
我试过了，但还是有同样的问题.. @Mr.Greenwoodz
需要在JS中生成select，并在js中追加。不要使用刀片，它不会被编译。您将需要 ajax 来获得您的价值。

标签： javascript laravel loops laravel-blade

【解决方案1】：

我对laravel没有经验，但我猜它根本不觉得对js文件负责。

我不喜欢这种将标记存储在两个地方的方法。一次在 html 中，一次在 JS 中的字符串中。而且你必须让这两个地方保持同步。

我可以建议一种不同的方法吗：

在 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);
    });
});

【讨论】：

@RowaydaKhayri，没有 js 变量不以 $ 开头，但我已经适应了这种命名变量的模式，这些变量存储了对带有前导 $ 的 jQuery 对象的引用，主要是将这些 jquery 列表与本地对象区分开来，主要是真实的 DOM 节点和数组。恰好这个 sn-p 只包含存储 jquery 对象的变量。
谢谢，它可以工作.. 但是新行的第一行有一个默认数量值.. 有没有办法解决这个问题？
@RowaydaKhayri 没有检查这一点，认为隐含的 .clone(false) 会解决这个问题。我已更新答案以附加初始 .orderItem 的标记而不是克隆节点，因为值不会存储在更改标记中。