我的代码目前用调用js函数，只有第一个有效，点击其他的按钮也是第一个有效
我知道是这种方法参数容易出问题，尝试用其他onclick="close()"的方法对所有都不起效了，所以应该怎样更改，可以使三个都有效呢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/css_specific/product_image_list.css"/>
<script src="javascript/common.js"></script>
</head>
<body>
<div id="big">
<div class="relative_positioning box border diaplay">
<div class="pic display"><img class="size" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F10%2F20140710184100_3GVKv.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656425497&t=b638c95d773edcc7337334ef39eff83f" alt="" title=""/>
</div>
<div class="absolute_positioning mask">
<h3 class="margin">竹木筷</h3>
<h6>日式家用和风竹木筷子酒店家庭筷无漆无蜡料理寿司筷高档餐具</h6>
</div>
<div class="title">
<p><span>￥29.99</span></p>
<p>竹木筷</p>
<button type="button"><span>♡</span>收藏</button>
<a href="javascript:close()"><button type="button">加入购物车</button></a>
</div>
</div>
<div class="relative_positioning box border display">
<div class="pic display"><img class="size" src="http://t13.baidu.com/it/u=4040911488,1150688093&fm=224&app=112&f=JPEG?w=500&h=500" alt="" title=""/></div>
<div class="absolute_positioning mask">
<h3 class="margin">金属筷</h3>
<h6>北欧ins彩色情侣筷子单人不锈钢家用夫妻金属筷子</h6>
</div>
<div class="title">
<p><span>￥39.99</span></p>
<p>金属筷</p>
<button type="button"><span>♡</span>收藏</button>
<a href="javascript:close()"><button type="button">加入购物车</button></a>
</div>
</div>
<div class="relative_positioning box border display">
<div class="pic display"><img class="size" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201503%2F12%2F20150312165444_GZfTY.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656425647&t=e2d762e2dff54584c153f45a4d68f6f4" alt="" title=""/></div>
<div class="absolute_positioning mask">
<h3 class="margin">象牙筷</h3>
<h6>高颜值象牙白色家用筷子密胺耐高温不易发霉酒店用公筷可刻字</h6>
</div>
<div class="title">
<p><span>￥36.99</span></p>
<p>象牙筷</p>
<button type="button"><span>♡</span>收藏</button>
<a href="javascript:close()"><button type="button">加入购物车</button></a>
</div>
</div>
</div>
</body>
</html>
function close(){
var adv=document.querySelector('.mask');
adv.style.left=0+'px';
}
document.querySelector只能匹配找到的第一个元素，你有三个元素，所以点击其他几个按钮，只有第一个有效果；
你可以在点击时查找当前元素的父级的上一个相邻元素.mask，这样操作的就是当前组的元素了
1 给每个可能需要操作的元素添加唯一标识，比如添加id
2 a标签 调用close方法时候，传递唯一标识，方便close操作元素
2 在 close 方法中，根据唯一标识进行修改填写元素信息