文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery:按下键触发<a>标记的单击事件

问jQuery:按下键触发<a>标记的单击事件
EN

Stack Overflow用户

提问于 2015-01-13 12:39:12

回答 2查看 2K关注 0票数 0

我已经创建了一个html页面，它显示图像&导航到基于左右箭头键的其他图像。

有一个带有下载属性的锚标记。当前显示在屏幕上的图像路径通过jquery设置为此标记的href。

单击此链接可下载图像。我需要在向下箭头按下，图像应该下载。(简而言之，应该触发这个锚标记的单击事件。)

我尝试过jquery 触发器函数，但不起作用。下面是我的密码。

提前谢谢。

<!doctype HTML>
<html>
<head>
<title>My Page</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
div.links {
    top: 95%;
    left: 45%;
    position: fixed;
}

a.dLink, a.nav {
    text-decoration: none;
}

label {
    background: #330033;
    padding: 2px;
    color: #CC9933;
    cursor: pointer;
}
</style>
</head>

<body>
    <input type="hidden" id="iNames"
        value="IMG1.jpg,IMG2.jpg,IMG3.jpg">
    <img class="pic" />
    <div class="links">
        <label class="prev">Prev</label>
        <a class="dLink" href="" download>
           <label>Download</label>
        </a>
        <label class="next">Next</label>
    </div>
    <script type="text/javascript">
        $(document).ready(
                function() {
                    iNames = ($("#iNames").val()).split(",");
                    total = iNames.length;
                    i = 0;
                    $("img.pic").attr("src",iNames[i]);
                    $("a.dLink").attr("href", $("img.pic").attr("src"));
                    $(document).keydown(function(e) {
                        switch (e.which) {
                        case 37: // left
                            prev();
                            break;

                        case 39: // right
                            next();
                            break;
                        case 40: // down
                            $("a#dLink").trigger("click"); //this is not working
                            break;
                        default:
                            return; 
                        }
                    });

                    function next() {
                        i = i == total - 1 ? 0 : i + 1;
                        setImage();
                    }
                    function prev() {
                        i = i == 0 ? total - 1 : i - 1;
                        setImage();
                    }
                    function setImage() {
                        $("img.pic").attr("src",iNames[i]);
                        $("a.dLink").attr("href", $("img.pic").attr("src"));
                    }
                    $("label.next").click(function() {
                        next();
                    });
                    $("label.prev").click(function() {
                        prev();
                    });
                });
    </script>
</body>
</html>

jquery

html

download

anchor

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-13 12:49:05

触发本机单击事件调用DOM节点方法：{需要使用类选择器，而不是ID}

$(".dLink")[0].click();

票数 2

Stack Overflow用户

发布于 2015-01-13 12:50:34

有个小错误。

试试这个：

$("a.dLink")[0].click();

演示

因为，dLink是应用于<a>的类。您必须使用a.dLink选择器。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27922407

复制

相似问题

问jQuery:按下键触发<a>标记的单击事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:按下键触发<a>标记的单击事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:按下键触发<a>标记的单击事件
EN