华为智能门锁标准版 - AI指纹锁，手机钱包钥匙开锁，HarmonyOS猫眼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>华为智能门锁</title>
<link rel="stylesheet" href="css/main.css">
<style>
</style>
<script src="js/jQuery_file.js"></script>
<script type="text/javascript">
//6，加减数量
$(function(){
$("#count_add").click(function(){
var index=$("#product_count").val();
index++;
if(index>=10){
index=10;
}
$("#product_count").val(index);
});
$("#count_minus").click(function(){
var index=$("#product_count").val();
index--;
if(index<=0){
index=1;
}
$("#product_count").val(index);
})
})
<pre><code> //第二题点击不同颜色选项
// 获取颜色选项的元素
var colorOptions = document.querySelectorAll(".color .item");
// 为每个颜色选项添加点击事件监听器
colorOptions.forEach(function(option) {
option.addEventListener("click", function() {
// a) 选中当前颜色选项，其余选项恢复正常
colorOptions.forEach(function(item) {
if (item === option) {
item.classList.add("selected");
} else {
item.classList.remove("selected");
}
});
// b) 清空页面左侧产品图片列表，并加载对应颜色的所有产品图片
var photoList = document.querySelector("#scroll ul");
photoList.innerHTML = ""; // 清空图片列表
// 加载对应颜色的所有产品图片
var jsonData = {
"星际黑": ["img/a01.png", "img/a02.png", "img/a03.png"],
"鎏光金": ["img/b01.png", "img/b02.png", "img/b03.png"]
// 其他颜色的图片数据...
};
var selectedColor = option.textContent.trim();
var colorPhotos = jsonData[selectedColor];
colorPhotos.forEach(function(photo) { // 修改变量名称为photo
var li = document.createElement("li");
var img = document.createElement("img");
img.src = photo;
li.appendChild(img);
photoList.appendChild(li);
});
// c) 左侧上方大图默认显示第一张产品图片
var firstPhoto = colorPhotos[0];
var mainPhoto = document.querySelector("#photo_pannel .photo img");
mainPhoto.src = firstPhoto;
});
});
</script>
</head>
<body>
<div id="nav_panel">
<div class="nav"><img src="img/top.png" alt=""></div>
</div>
<div class="position">
<a href="" title="首页">首页</a>
&gt;
<a href="" title="智能家装">智能家装</a>
&gt;
<a href="" title="智能门锁">智能门锁</a>
&gt;
<a id="product_title" href="" title="智能门锁 标准版">智能门锁 标准版</a>
</div>
<div class="main">
<div id="photo_pannel">
<div class="photo"><img src="img/a01.png" alt=""></div>
<div class="photo_list">
<div class="prev tab"><img src="img/disabled-prev.png" alt=""></div>
<div id="scroll">
<ul>
<li><img src="img/a01.png" alt=""></li>
<li><img src="img/a02.png" alt=""></li>
<li><img src="img/a03.png" alt=""></li>
<li><img src="img/a04.png" alt=""></li>
<li><img src="img/a05.png" alt=""></li>
<li><img src="img/a06.png" alt=""></li>
<li><img src="img/a07.png" alt=""></li>
<li><img src="img/a08.png" alt=""></li>
<li><img src="img/a09.png" alt=""></li>
<li><img src="img/a10.png" alt=""></li>
<li><img src="img/a11.png" alt=""></li>
<li><img src="img/a12.png" alt=""></li>
</ul>
</div>
<div class="next tab"><img src="img/hover-next.png" alt=""></div>
</div>
</div>
<div id="property_pannel">
<div class="title">华为智能门锁 标准版</div>
<div class="desc">AI指纹锁，华为手机钱包钥匙开锁，HarmonyOS分布式猫眼，8800mAh超大容量电池</div>
<div class="price">¥<span>2799</span></div>
<div class="hot">智能门锁系列：<span>拼团最高省500</span><div>&gt;</div></div>
<div class="color choose_outer" id="color_panel">
<div class="title">颜色</div>
<div class="choose">
<div class="item black">星际黑</div>
<div class="item gold selected">鎏光金</div>
</div>
</div>
<div class="type choose_outer" id="version_panel">
<div class="title">版本</div>
<div class="choose">
<div class="item">Pro 版<br>比如>3D人脸识别+可视猫眼+指纹解锁</div>
<div class="item">标准版<br>可视猫眼+指纹解锁</div>
</div>
</div>
<div class="service choose_outer">
<div class="title">保障服务</div>
<div class="desc">已有590万位用户加入华为官方保障服务</div>
</div>
<div id="order_panel">
<div class="count">
<div class="count_op" id="count_minus">
<img src="img/minus.png" alt=""></div>
<input type="text" name="" id="product_count" value="1">
<div class="count_op" id="count_add">
<img src="img/add.png" alt="">
</div></div>
<button class="add">加入购物车</button>
<button class="buy">立刻购买</button>
</div>
</div>
</div>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/pB8x 著作权归作者所有。请勿转载和采集!