jQuery - 從 PHP foreach 循環存儲變量

Question

我只是在玩玩，試圖提高我的 jQuery 知識，但我遇到了一個無法解決的問題。 我正在使用laravel ，只是作為旁注，但這也適用於標准 PHP。

我基本上是在檢索我想用 jQuery 操作的數據集合。 檢索到的列表大小會不斷變化； 例如：

• 有一組對象。
• 每個對象都有一定數量的附加物品。
• 每個項目都有一個名稱和數量。
• 檢索時，我希望能夠顯示每個項目的名稱和數量。
• 如果我再改變金額。 我希望每個項目的金額相應地改變。

這是我的代碼：

@foreach($items as $item)
<li><span class="item_amount">{{ $item->amount }}</span>{{ $item->name }}</li>
@endforeach 

這將檢索與此對象關聯的所有項目：在這種情況下，我們會看到如下內容：

• 400 件 1
• 67 項 2
• 830 item3

我有一個非常簡單的 HTML <select>輸入：

<select id="steven" class="formDropdown">
    <option>Select item amount</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

然后我想要做的是檢索每個項目的數量，將其作為變量存儲在 jQuery 中，然后當<select>數量發生變化時，項目數量將乘以它。

例如，如果從選擇輸入中選擇了 2，則列表將更改為：

• 800 件 1
• 134 項 2
• 1660 item3

我發現檢索金額的最佳方法是將變量設置為 PHP。

var originalAmount = '{{ $item->amount }}';

我這樣做的原因是因為如果我在<span>標簽中選擇 HTML 的值，每次我乘它都會乘以顯示的數量而不是原始數量。 一個例子：

如果數量是 10 並且我乘以 3，結果是 30，如果我再乘以 2，期望 20 (10*2) 我現在顯然得到 60。

根本不是我想要的。

正如您所看到的，我的問題是我需要為 foreach 循環中的每個項目設置一個變量，我嘗試過這樣做：

$( ".item_amount" ).each(function( index ) {
    alert( amount+ ": " + $( this ).text() );
});

它按順序提醒我每個數量，一切都很好，但是我現在想將這些數量存儲為與其在列表中的位置相對應的變量：

我試圖做這樣的事情來獲得一個動態變量名：

@foreach($items as $item)
<li><span class="item_amount{{$item->amount}}">{{ $item->amount }}</span>{{ $item->name }}</li>
@endforeach

這將為我提供一個動態類，然后我可以選擇和操作它是完美的。

但是，如何將這些中的每一個存儲為 jQuery 中的變量？

1. 變量 1 將被命名為“item_amount400”，值為 400
2. 變量 2 將被命名為“item_amount67”，值為 67
3. 變量 3 將被命名為“item_amount830”，值為 830

我想通過上面提到的來實現：

var item_amount400 = '{{ $item->amount }}';

我可能正在以最前后的方式來做這件事，並且對此考慮得太多。

是否可以在 foreach 循環內創建變量，然后在循環外檢索所有變量？ 例如像這樣：

@foreach($items as $item)
<li><span class="item_amount{{$item->amount}}">{{ $item->amount }}</span>{{ $item->name }}</li>
<script>
    make variable here
</script>
@endforeach

如果是這樣，我將如何去做，如何使變量成為全局變量並確切知道要檢索什么？

就像我提到的每個對象都有不同數量的項目，有些可能有 3 個，有些可能有 30 個。

Answer 1

請使用數據屬性在下面找到一個片段 - 正如@jcaron 所提到的 - 它將使用由 php 生成的原始值：

 @foreach($items as $item)
<li><span class="item_amount" data-amount="{{ $item->amount }}">{{ $item->amount }}</span>{{ $item->name }}</li>
@endforeach 

 $('.formDropdown').bind( 'change', function(e){ var multiply = $(this).val(); $( ".item_amount" ).each(function( index, item ) { $( item ).text( multiply*($(item).data('amount'))); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><span class="item_amount" data-amount="800">800</span> item1</li> <li><span class="item_amount" data-amount="134">134</span> item2</li> <li><span class="item_amount" data-amount="1660">1660</span> item3</li> </ul> <select id="steven" class="formDropdown"> <option>Select item amount</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

Answer 2

以下代碼將完成這些工作，在更改選擇框時，數量將與列表項編號相乘

<select id="steven" class="formDropdown">
    <option>Select item amount</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<br><br><br>
<div class="content">
    @foreach($items as $item)
       <li><span class="item_amount">{{ $item->amount }}</span>{{ $item->name }}</li>
    @endforeach 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).on('change', '.formDropdown', function() {
        var amount = $(this).val();
        updateUI(amount);
    });
    function updateUI(amount){
        $( ".item_amount" ).each(function( index ) {
            var value = parseInt($( this ).text());
            $( this ).text(amount * value);
        });
    }
</script>

希望這可以幫助