当按下某个键时，触发两个链接中的一个

Question

我想用E键触发第一个链接，或用Rnter来触发导航。

这就是我尝试过的：

$(document).ready(function() {
$(document).bind("keydown", function(e) {
console.log(e.keyCode);

if (e.keyCode == 76) {
$("div:first-of-type a").focus();
$("div:nth-of-type(2n) a").focus();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="http://google.com">Google (E)</a>
<a href="http://youtube.com">YouTube (R)</a>
</div>

Answer 1

您不需要给任何一个锚点焦点并尝试以编程方式单击它，只需直接导航到所需链接的href即可。

此外，class="test后面缺少一个结束引号。

顺便说一句"；e"；以及"；r〃；分别是69和82，而不是76。

$(document).ready(function() {
$(document).on("keydown", function(e) {
if (e.keyCode == 69) { 
location.href = "https://youtube.com";
alert("Going to YouTube"); // Just for testing
} else if(e.keyCode == 82) {
location.href = "https://example.com";
alert("Going to Example");  // Just for testing
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="https://youtube.com">
<img src="https://www.hugochaume.com/wp-content/uploads/2015/08/logo-codepen.png">
</a>
</div>

Answer 2

使用这个简单的脚本：

$(document).on("keydown", function (e) {
if (e.which == 69) { // e
$("#yourLink1").click();
}
});
$(document).on("keydown", function (e) {
if (e.which == 82) { // r
$("#yourLink2").click();
}
});

您可以在此处找到更多KeyCodes：https://keycode.info/

我还建议给你的链接ID:

<div class="test">
<a id="yourLink1" href="http://google.com"></a>
<a id="yourLink2" href="http://youtube.com"></a>
<img src="https://www.hugochaume.com/wp-content/uploads/2015/08/logo-codepen.png">
</div>

更新：

由于.which和.keyCode方法实际上被认为是不推荐使用的，我建议使用.code:

document.addEventListener("keydown", function(e) {
if (e.code == "KeyE") { // e
$("#yourLink1").click();
}
if (e.code == "KeyR") { // r
$("#yourLink2").click();
}
});

(感谢但泽提出此建议(

Answer 3

一个选项是将id添加到两个链接中，这样您就可以从JS中获取它们，然后用它们的href值更新window.location：

$(document).ready(function() {
$(document).bind('keydown', (e) => {
const link = document.getElementById(`link${ e.key.toUpperCase() }`);

if (link) {
console.log(`Should redirect to ${ link.href }...`);
location.href = link.href;
} else {
console.log(`No link for key = ${ e.key }.`);
}
});
});

body {
font-family: monospace;
}
a {
display: block;
padding: 8px;
text-decoration: none;
}
kbd {
border: 1px solid #CCC;
background: #EEE;
border-radius: 2px;
padding: 0 4px;
}
.as-console-wrapper {
max-height: 66px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="http://google.com" id="linkE">Google <kbd>E</kbd></a>  
<a href="http://youtube.com" id="linkR">YouTube <kbd>R</kbd></a>
</div>

或者，如果您不想添加ids，可以使用jQuery的.children()和.eq()根据其位置获取正确的链接：

$test = $('.test');
$(document).ready(function() {
$(document).bind('keydown', (e) => {
const key = e.key.toUpperCase();

if (key !== 'E' && key !== 'R') {
console.log(`No link for key = ${ e.key }.`, e.code);
return;
}

const link = $test.children().eq(key === 'E' ? 0 : 1);

if (link) {
console.log(`Should redirect to ${ link.attr('href') }...`);
// location.href = link.href;
}
});
});

body {
font-family: monospace;
}
a {
display: block;
padding: 8px;
text-decoration: none;
}
kbd {
border: 1px solid #CCC;
background: #EEE;
border-radius: 2px;
padding: 0 4px;
}
.as-console-wrapper {
max-height: 66px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="http://google.com">Google <kbd>E</kbd></a>  
<a href="http://youtube.com">YouTube <kbd>R</kbd></a>
</div>