Hea雅ven 2023-07-14 09:27 采纳率: 46.7%
浏览 47
已结题

前端脚本,通过a标签调用函数

我的代码目前用调用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';
        }
  • 写回答

2条回答 默认 最新

  • 前端-海鸟 2023-07-14 09:52
    关注

    document.querySelector只能匹配找到的第一个元素,你有三个元素,所以点击其他几个按钮,只有第一个有效果;
    你可以在点击时查找当前元素的父级的上一个相邻元素.mask,这样操作的就是当前组的元素了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 7月22日
  • 已采纳回答 7月14日
  • 创建了问题 7月14日

悬赏问题

  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion,用Ebsynth utility在视频选帧图重绘,第一步报错,蒙版和帧图没法生成,怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件,显示没有conda环境
  • ¥15 寻找公式识别开发,自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了?
  • ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问,已排除网页问题
  • ¥50 如何将脑的图像投影到颅骨上