!DOCTYPE htmlhtml head meta charset=utf-8 title华为智能门锁title link rel=stylesheet href=cssmaincss style style script src=jsjQuery_filejsscript script type=textjavascript script head body div id
To implement the functionality of updating the product name and price when different versions are selected, you can modify the JavaScript code as follows:
<script type="text/javascript">
var productData = [
{
"name":"星际黑",
"version":[{"name":"Pro 版 3D人脸识别+可视猫眼+指纹解锁","price":3699},{"name":"标准版 可视猫眼+指纹解锁","price":2499}],
"images":["a01.png","a02.png","a03.png","a04.png","a05.png","a06.png","a07.png","a08.png","a09.png","a10.png","a11.png","a12.png"]
},
{
"name":"鎏光金",
"version":[{"name":"Pro 版 3D人脸识别+可视猫眼+指纹解锁","price":3999},{"name":"标准版 可视猫眼+指纹解锁","price":2799}],
"images":["b01.png","b02.png","b03.png","b04.png","b05.png","b06.png","b07.png","b08.png"]
}
];
$(document).ready(function() {
$(".item").click(function() {
var color = $(this).text().trim();
var version = $(this).parent().prev(".title").text().trim();
var price = getProductPrice(color, version);
$("#product_title").text("智能门锁 " + color);
$(".price span").text(price);
});
});
function getProductPrice(color, version) {
for (var i = 0; i < productData.length; i++) {
if (productData[i].name === color) {
for (var j = 0; j < productData[i].version.length; j++) {
if (productData[i].version[j].name === version) {
return productData[i].version[j].price;
}
}
}
}
return 0;
}
</script>
In this code, I have added an event listener to the .item elements, which represent the different versions of the product. When an item is clicked, it retrieves the color and version information and calls the getProductPrice function to get the corresponding price from the productData array. Then, it updates the product title and price elements on the page.
Note: This code assumes that you have included the jQuery library before this script
原文地址: https://www.cveoy.top/t/topic/hS3P 著作权归作者所有。请勿转载和采集!