Laravel jQuery-存储PHP foreach循环中的变量

我只是在玩游戏，试图磨练我的jQuery知识，但我遇到了一个我无法解决的问题。我正在使用，只是作为旁注，但这也适用于标准PHP

我实际上是在检索我想用jQuery操作的数据集合。检索到的列表大小将不断变化；例如：

• 有一组对象
• 每个对象都有一定数量的附加项
• 每个项目都有名称和金额
• 检索时，我希望能够显示每个项目的名称和金额
• 如果我改变了金额。我希望每个项目的金额相应地改变

这是我的代码：

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

我这样做的原因是，如果我在

标记中选择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>
<script>
    make variable here
</script>
@endforeach

这会提醒我每个订单的金额，一切正常，但我现在想将这些金额存储为一个变量，对应于其在列表中的位置：

我尝试过这样做以获得动态变量名：

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

我可能是在背对背地做这件事，想得太多了

是否可以在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>
<script>
    make variable here
</script>
@endforeach

@foreach（$items作为$item）
{{$item->amount}{{$item->name}
在这里生成变量
@endforeach

如果是这样的话，我该怎么做？我该如何使变量成为全局变量，并确切地知道要检索什么

---

正如我所提到的，每个对象都有不同数量的项，有些可能有3个，有些可能有30个。

请在下面找到一个使用数据属性的片段，如@jcaron所述，它将使用php生成的原始值：

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

800项目1
134项目2
1660项目3

选择项目金额
1.
2.
3.

以下代码将完成这项工作，在更改选择框时，其金额将与列表项编号相乘

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

选择项目金额
1.
2.
3.




@foreach（$items作为$item）
{{$item->amount}{{$item->name}
@endforeach
$（document）.on（'change'，'.formDropdown'，function（）{
var amount=$（this.val（）；
更新（金额）；
});
函数更新（金额）{
$（“.item_amount”）。每个（函数（索引）{
var value=parseInt（$（this.text（））；
$（此）.text（金额*值）；
});
}

---

希望这有帮助

您真的需要将金额添加到类名中吗？我不知道，这就是我为什么要问的原因。这是一个我不知道如何解决的问题的可能解决方案。我将从类名中删除金额。并在选择框中添加jqueryonchange。在该函数中，选择类名为

item\u amount

的所有元素，并将值设置为current value*selected value。我感谢您的建议，但这对我的问题不起作用。在我的问题中，我指出如果我使用选择当前值的方法。我遇到了一个问题，当前值是相乘的，而不是原始值。这就是我问题的全部本质。我可以很容易地继续乘以每个列表项的当前值，但是我得到了不想要的效果。呃，我一定错过了一些非常重要的东西，你在用服务器端做什么？在我看来，这不太像PHP？回到主题，有许多不同的选项，包括将值作为

data-*

属性添加到对象，将整个数组作为JSON传递。。。如果每个项目只有一个值要传递，那么

data-*

属性可能是最简单的选项。

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