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 ITEM1
• を67項目2
• 830項目3

私は非常に単純な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> 

私は、何をしたいのかが<select>量があるときに、各項目の量を取得するjQueryのでは変数としてそれを格納してあります変更された場合、明細額はそれによって乗算されます。例えば

2は、リストはに変わってしまうの選択入力から選択された場合：私はことを考え出した

• 800 ITEM1
• 134 ITEM2
• 1660 ITEM3

金額を取得する最善の方法は、変数をPHPとして設定することです。私は<span>タグ内にHTMLの値を選択した場合、私はそれを乗算するたびに表示された金額ではなく、元の量を乗算しているため、このようにそれを行うための

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

私の理由があります。例：私は明らかに今60

を得る結果は20（10 * 2）を期待し、IIの場合、乗算2で、30である

の量は10であり、Iは、3を掛けた場合私はまったく欲しいものではありません。

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

私警告：あなたはここに私の問題を見ることができるように

は

私はこのような何かをやって試してみた私のforeachループ、中項目ごとに変数を設定する必要があるということです私は今、リスト内のその位置に対応する変数としてそれらの金額を保存したい：

私は動的変数名を得るためにこれをしようとしました：

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

これは、私が次に選択して操作できる動的なクラスを提供します。これは完璧です。

しかし、これらをそれぞれ変数としてjQuery内に保存するにはどうすればよいですか？

1. 変数1 400
2. 変数2の値と "item_amount400" と命名されることになるが、67
3. 変数3の値と "item_amount67" と命名されるであろうが830
の値が "item_amount830" と命名されます私はおそらくだ

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

：私は私が上に言及した何を達成したい

これを最前面に向かわせ、あまりにも多くのことを考えています。

foreachループ内で変数を作成し、そのループの外にある変数をすべて取得できますか？例えば。

もしそうなら、どのようにすればよいでしょうか、どのように変数をグローバルにして、何を検索するのかを正確に知ることができますか？

私は、それぞれのオブジェクトはアイテムの異なる量を持って述べたように、いくつかは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

次のコードは、ものを行うだろう、リスト項目の数を掛けますselrectボックスのそれ量の

<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> 

・ホープ変更にこれは役立ちます