Question

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

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

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

这是我的代码：

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

这将检索与此对象关联的所有项：在这种情况下，我们看到类似的东西：

400 item1
67 item2
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 item1
134 item2
1660 item3

我发现检索金额的最佳方法是将变量设置为PHP。

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

我这样做的原因是因为如果我在<span>标签中选择HTML的值，每次我乘以它会将显示的数量乘以原始数量。一个例子：

如果数量是10并且我乘以3结果是30，如果iI然后乘以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将被命名为“item_amount400”，其值为400
变量2将被命名为“item_amount67”，其值为67
变量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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

希望这有帮助

jQuery - 从PHP foreach循环中存储变量

2 个答案: