js 对象数组 减当前价格时影响了其他的 unitPrice[this.index].uPrice = 1; 这里是赋值的地方

czkylin 2018-12-17 04:27:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content span.right i,.content span.right input{float: left; display: inline-block; width: .62rem; height: .5rem; line-height: .5rem; text-align: center; font-size: .26rem; background: #fff;}
i.minus,i.plus{width: .6rem !important; background: #F7F4F4 !important;}

</style>
<script>
document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/750*100 + 'px';
</script>

</head>
<body>
<div class="content">
<p class="price"><span>¥</span><strong>32</strong></p>
<span class="right count"><i class="minus">-</i><input class="num" type="text" name="" value="8"><i class="plus">+</i></span>
</div>
<div class="content">
<p class="price"><span>¥</span><strong>30</strong></p>
<span class="right count"><i class="minus">-</i><input class="num" type="text" name="" value="8"><i class="plus">+</i></span>
</div>
<div class="content">
<p class="price"><span>¥</span><strong>40</strong></p>
<span class="right count"><i class="minus">-</i><input class="num" type="text" name="" value="8"><i class="plus">+</i></span>
</div>
<script type="text/javascript">
var content = document.getElementsByClassName('content');
var minus = document.getElementsByClassName('minus');
var plus = document.getElementsByClassName('plus');
var num = document.getElementsByClassName('num');
var price = document.getElementsByTagName('strong');
var length = content.length;
var count = 0;
var unitPrice = [];
var json = {};
json.choose = 0;
json.uPrice = 0;

for(var i=0; i<content.length; i++) {
unitPrice.push(json)
}

//加减
for(var i=0; i<content.length; i++) {
minus[i].index = i;
plus[i].index = i;
unitPrice[i].uPrice = num[i].value * price[i].innerHTML;
console.log(unitPrice[i]);
minus[i].addEventListener('touchstart', function() {
num[this.index].value -= 1;
if(num[this.index].value < 0) {
num[this.index].value = 0;
}
console.log(this.index);
unitPrice[this.index].uPrice = 1;
console.log(unitPrice);
})
}

</script>
</body>
</html>
...全文
253 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
aiy3 2018-12-18
  • 打赏
  • 举报
回复
楼上正解,我的理解: 在你定义var json = {};时,因为是对象变量(参见js变量类型,值类型与引用类型),所以是在栈内存中保存了json变量指向堆内存的地址,在堆内存该地址中保存了该变量的数据内容。改变json变量,是对堆内存中该地址的数据内容改变。 当你在循环外定义json时,在你的循环中unitPrice.push(json),每次push的元素(json变量)实际上指向相同的一个内存地址。如果改变了某个元素,即改变了该元素指向的内存地址里的内容,其他元素也会发生相同的改变(因为它们指向同一个地址啊)。 以上
老马历写记 2018-12-18
  • 打赏
  • 举报
回复
楼上正解,数组里放的是同一个json对象{},因此unitPrice不同index的操作,会相互影响。
天际的海浪 2018-12-17
  • 打赏
  • 举报
回复
要每次循环都创建一个新的对象

for(var i=0; i<content.length; i++) {
  var json = {};
  json.choose = 0;
  json.uPrice = 0;
  unitPrice.push(json)
}

一、AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能 二、AspNetPager支持各种数据绑定控件GridView、DataGrid、DataList、Repeater以及自定义的数据绑定控件的分页功能十分强大。 三、AspNetPager分页控件本身并不显示任何数据,而只显示分页导航元素,数据在页面上的显示方式与该控件无关,所以需要手写数据连接方法来配合, 四、结合TOP 。。。NOT IN 的通用存储过程分页方法使用AspNetPager十分实用 测试控件datalist aspnetpager 的分页方法示例 分页方法为 PostBack 方式 1、 首先将AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引入dll文件 2、 在工具栏中添加控件,这样可以支持拖拽使用 3、 要使用AspNetPager 要为其设置最基本的属性 使用 SqlServer Northwind数据库的 Products表 protected Wuqi.Webdiyer.AspNetPager AspNetPager1; protected System.Web.UI.WebControls.Label Label1; protected System.Web.UI.WebControls.DataList DataList1; private void Page_Load(object sender, System.EventArgs e) { this.AspNetPager1.PageSize=10; //设置每也显示的记录条数 if(!IsPostBack) //只在页面第一次加载起作用 { SqlDBManager db = new SqlDBManager(System.Configuration.ConfigurationSettings.AppSettings["SqlConnectionString"]); AspNetPager1.RecordCount=db.CountPage("products");//获得要使用表的记录总数 //db.CountItems自定义的方法 this.BindData(); } } private void BindData() { SqlDBManager db= new SqlDBManager(System.Configuration.ConfigurationSettings.AppSettings["SqlConnectionString"].ToString(); DataList1.DataSource=db.FenPage(this.AspNetPager1.PageSize,this.AspNetPager1.CurrentPageIndex,"productid","products","productid,productname,unitprice,unitsinstock",""); //自定义方法由 TOP not in 存储过程分页方法改编 this.DataList1.DataBind(); //控件数据绑定 this.Label1.Text="当前第"+this.AspNetPager1.CurrentPageIndex+"页 总"+this.AspNetPager1.PageCount+"页"; } private void AspNetPager1_PageChanged(object sender, System.EventArgs e) { //页索引改变方法 this.BindData(); } 设计页效果
产品ID 产品名称 产品数量 产品单价
<%# DataBinder.Eval(Container.DataItem,"Productid")%> <%# DataBinder.Eval(Container.DataItem,"productname")%> <%# DataBinder.Eval(Container.DataItem,"unitprice")%> <%# DataBinder.Eval(Container.DataItem,"unitsinstock")%>
Label

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧