[英]How can I get set of li elements and put it to my object in JavaScript
The first thing I want ask for advice. 我想征求意见的第一件事。 I am making shopping cart only on JavaScript and I want to know how organize my application more correct. 我仅使用JavaScript来制作购物车,我想知道如何更正确地组织我的应用程序。 For example I have two page: product page and basket page. 例如,我有两个页面:产品页面和购物篮页面。 For storing data I use array: 为了存储数据,我使用了数组:
var productId, productName, productSize, productAmount;
var productsData = [];
and I want to put there objects like this: 我想把这样的对象放在那里:
productsData.push({productId:productId,productName:productName,productSize:productSize,productAmount:productAmount});
I don't know how I can get set of li elements and put them into my object (there is stored each size of shoe). 我不知道如何获取li元素集并将其放入我的对象(存储了每种尺码的鞋子)。 I have created next, but unfortunately it doesn't work: 接下来,我创建了,但是不幸的是它不起作用:
$('.size').on("click", "a li", function () {
productSize = parseInt($(this).text(), 10);
productsData.push({productSize:productSize});
console.log(productsData[productId]['productSize']);
});
When I will be get whole object I am going to put it into Local Storage and display it on basket page. 当我将得到整个对象时,我将其放入“本地存储”并显示在购物篮页面上。
Below my html code fragment: 在我的html代码片段下面:
<main class="product-section">
<div class="product-preview" id="item1">
<div class="current-photo-product">
<img src="img/product-photo1.png" alt="Grey">
<img src="img/product-photo2.png" alt="White">
<img src="img/product-photo3.png" alt="Light Blue">
<img src="img/product-photo4.png" alt="Dark Blue">
</div>
<div class="choice-photo">
<ul>
<li><img src="img/product-photo1.png" alt="Grey"></li>
<li><img src="img/product-photo2.png" alt="White"></li>
<li><img src="img/product-photo3.png" alt="Light Blue"></li>
<li><img src="img/product-photo4.png" alt="Dark Blue"></li>
</ul>
</div>
</div>
<div class="product-details">
<div class="wrapper-details">
<h2>New Balance</h2>
<p class="article-number">Article number: 14210160762</p>
<h4 id="amount">€ 99.95</h4>
<p class="description">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
</p>
<h3>Size</h3>
<ul class="size" id="listOfSizes">
<a href="#"><li>38</li></a>
<a href="#"><li>39</li></a>
<a href="#"><li>40</li></a>
<a href="#"><li>41</li></a>
<a href="#"><li>42</li></a>
</ul>
<button id="add-to-cart">Add to cart</button>
</div>
</div>
</main>
Simple, you have a syntax error: 很简单,您有一个语法错误:
var = productId, productName, productSize, productAmount;
should be 应该
var productId, productName, productSize, productAmount;
Your console should also address the pushed object: 您的控制台还应该处理推送的对象:
console.log(productsData[0]['productSize']);
Your question isn't quite clear to me but let me show you how I would do it with your suggested object array {productId:productId,productSize:productSize,...}
- maybe it can help you: 您的问题对我来说还不是很清楚,但让我向您展示我如何使用建议的对象数组{productId:productId,productSize:productSize,...}
-也许可以帮助您:
When you create an Object in an array like that, and you want to add a property like productSize
, productName
,... you have to make sure you're adding it inside the object and not the array like you do with productsData.push({productSize:productSize});
当您在这样的一个数组的对象,要添加像一个属性productSize
, productName
,......你必须确保你将它添加在物体内部,而不是阵列像你这样做productsData.push({productSize:productSize});
. 。 So first find the right object by the property productId
and then add your property and value pair. 因此,首先通过属性productId
找到合适的对象,然后添加属性和值对。
productsData = [];
//random id for this example - you can generate those however you like of course
productId = 112;
//you add the new product with given id...but you don't know how big the array was before
productsData.push({productId:productId})
//now you set a size
productSize = 33;
//you search for the product with given ID in the array to be able to add the size value to it
//the method "arrayObjectIndexOf" I just copied from an answer here:
//http://stackoverflow.com/questions/8668174/indexof-method-in-an-object-array
var searchIndex = arrayObjectIndexOf(productsData, productId, "productId");
//now in the first brackets you get inside the object and in the second you create a new property "productSize"and set its value
productsData[searchIndex]["productSize"] = productSize;
alert(productsData[searchIndex].productSize);
function arrayObjectIndexOf(myArray, searchTerm, property) {
for(var i = 0, len = myArray.length; i < len; i++) {
if (myArray[i][property] === searchTerm) return i;
}
return -1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.