jQuery的 - 从PHP foreach循环
存储变量我只是有一个发挥作用的,努力增强我的jQuery的知识,我碰到的一个问题,我不能绕到我的头。我正在使用laravel,只是作为一个附注,但这也适用于标准PHP。jQuery的 - 从PHP foreach循环
我本质上检索数据的集合,我想用jQuery操纵。检索的列表大小会不断变化;例如:
- 有一些对象的集合。
- 每个对象具有一定量的连接到它的产品。
- 每个项目都有一个名称和数量。
- 检索时我希望能够显示每个项目的名称和数量。
- 如果我然后改变金额。我希望每个项目的数量都相应改变。
这里是我的代码:
@foreach($items as $item)
<li><span class="item_amount">{{ $item->amount }}</span>{{ $item->name }}</li>
@endforeach
这检索关联到这个对象中的所有物品:我们看到像 在这种情况下:
- 400条1/1
- 67 ITEM2
- 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>
那么,什么我想要做的是检索每个项目的数额,将其存储在jQuery的一个变量,然后当<select>
量改变,项目数量将乘以它。
例如,如果2从选择输入选择的列表将变为:
- 800条1/1
- 134 ITEM2
- 1660项目3
我已经想通了,检索金额的最佳方法是将该变量设置为PHP。
var originalAmount = '{{ $item->amount }}';
我之所以做这种方式是因为如果我选择<span>
标签内的HTML的值,每次我乘一次乘上显示的金额,而不是原来的量。一个例子:
如果量为10和我乘以3的结果是30,如果II然后乘以2,期望20(10 * 2)I明显现在得到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
请在下面找到使用数据片段属性 - 由@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>
完美的作品,非常感谢你! –
下面的代码会做的东西,在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 onchange。在该函数中,选择所有具有类名称为“item_amount”的元素,并将该值设置为当前值*选定值。 –