Javascript 使用基于localstorage的jquery更改元素的输入值
我使用php为基于数据库的购物车创建一些html产品元素 问题是，如果我更改了产品数量并刷新了我的页面，则数量将更改回“1”。所以我使用localStorage来存储每个产品的数量。如果我刷新，数量将成功保持不变，但如果我单击“+”图像元素添加到数量，则仅当我刷新页面时，才会显示产品数量更改的输入值。因此，问题是如何更新代码以动态添加产品数量，同时将数量保存到localstorage 我的代码： cart.phpJavascript 使用基于localstorage的jquery更改元素的输入值,javascript,php,html,jquery,Javascript,Php,Html,Jquery,我使用php为基于数据库的购物车创建一些html产品元素 问题是，如果我更改了产品数量并刷新了我的页面，则数量将更改回“1”。所以我使用localStorage来存储每个产品的数量。如果我刷新，数量将成功保持不变，但如果我单击“+”图像元素添加到数量，则仅当我刷新页面时，才会显示产品数量更改的输入值。因此，问题是如何更新代码以动态添加产品数量，同时将数量保存到localstorage 我的代码： cart.php <div class="cart__table table-re
<div class="cart__table table-responsive">
<table width="100%" class="table" id ="cartItems">
<thead>
<tr>
<th>PRODUCT</th>
<th>NAME</th>
<th>UNIT PRICE</th>
<th>QUANTITY</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<?php
if(isset($_COOKIE)){
$count = 0;
foreach($_COOKIE as $i){
$count++;
if($count ==1 ){
continue;
}
$product = json_decode($i,true);
echo "
<tr
class ='product-columns'>
<td class ='product__thumbnail'>
<img src = ".$product["image"]." />
</td>
<td class='product__name'>
<h3> ".$product["called"]." </h3>
<small class = 'cartItemID' style = 'display:none;'> ".$product["code"]." </small>
<small>".$product["soldAt"]."</small>
</td>
<td class='product__price'>
<div class='price'>
<span class='new__price'>".$product["costs"]."</span>
</div>
</td>
<td class='product__quantity'>
<div class='input-counter'>
<div>
<span class='minus-btn'>
<svg>
<use xlink:href='../images/sprite.svg#icon-minus'></use>
</svg>
</span>
<!--this is the element i want to change -->
<input
type='text' min='1'
max='10'
class='counter-btn' disabled
name = ".$product["code"]."
/>
<span class='plus-btn' >
<svg>
<use xlink:href='../images/sprite.svg#icon-plus'></use>
</svg>
</span>
</div>
</div>
</td>
<td class='product__subtotal'>
<div class='price'>
<span class='new__price'>$250.99</span>
</div>
<a class='remove__cart-item'>
<svg>
<use xlink:href='../images/sprite.svg#icon-trash'></use>
</svg>
</a>
</td>
</tr>
";
}
<!-- when the php loads set input values to localstorage values -->
echo "
<script type = 'text/javascript'>
var quantities = document.querySelectorAll('.counter-btn');
quantities.forEach(q=>q.value = getSavedValue(q.name));
</script>
";
}else{
echo "<h1> No products have been added. </h1>";
}
?>
</tbody>
</table>
</div>
尝试将此代码放在一个函数中，可能放在“changeValue（）中” 如果将其放在changeValue（）中，实际代码将是
$('.counter-btn').attr('value', val);
<input id="counter-btn-1" type='text'min='1' max='10' class='counter-btn' disabled name=".$product["code"]."/>
尝试将此代码放在一个函数中，可能放在“changeValue（）中” 如果将其放在changeValue（）中，实际代码将是
$('.counter-btn').attr('value', val);
<input id="counter-btn-1" type='text'min='1' max='10' class='counter-btn' disabled name=".$product["code"]."/>
您还可以通过php会话解决此问题 connection.php index.php
您还可以通过php会话解决此问题 connection.php index.php
$('#counter-btn-1').attr('value', val);
if (!session_id()) {
session_start();
}
<?php
require 'connection.php';
?>
<div>
<span class="plus-btn">+</span>
<?php if (isset($_SESSION['count_val'])){ ?>
<input type="text" name="" class="counter-btn" value="<?php echo $_SESSION['count_val']?>">
<?php }else{ ?>
<input type="text" name="" class="counter-btn" value=""> //Here's php loop value
<?php }?>
<span class="minus-btn">-</span>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.minus-btn,.plus-btn').click(function(){
var val = $('.counter-btn').val();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {val:val},
success:function(){
alert('Data has been entered in session');
}
})
})
})
</script>
require 'connection.php';
$val = $_POST['val'];
$_SESSION['count_val'] = $val;