按Window和Attr url的类选择层次结构元素

Question

您好，我是相关标签的初学者，

我用作参考:绑定键盘到左/右导航

我有这个HTML:

<div class="pager">
    <br />
    <div class="myjsp-prev-next" style="text-align:inherit;">
        <span class="myjsp-prev"><a href="{url}">Prev</a></span>
        <span class="myjsp-next"><a href="{url}">Next</a></span>
    </div>
</div>
<br />

Javascript:

    $(function() {
     $(document).keyup(function(e) {
         switch (e.keyCode) {
             case 37:
                 var x = document.querySelectorAll(".myjsp-prev");
                 window.location = x.attr('href');
                 break;
             case 39:
                 window.location = $('span.myjsp-next a').attr('href');
                 break;
         }
     });
 });

我正在阅读JQUERY的API，并想尝试使用querySelector来选择具有该类的元素，然后转到下一个或上一个url。

我正在阅读JQUERY的层次结构页面，我不知道什么是错的。提前谢谢。

编辑:我试着添加:

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
  case 37:
var x = document.querySelectorAll(".myjsp-prev a")[0];
var href = x.getAttribute('href');
    window.location = x.attr('href');
    break;
  case 39:
var y = document.querySelectorAll(".myjsp-next a")[0];
var href = y.getAttribute('href');
    window.location = y.attr('href');
    break;
    }
  });
});
</script>

我在控制台日志中得到错误:
未捕获的类型错误:y.a attr不是一个函数

Uncaught TypeError: x.a attr is not a function

我也尝试了eq(x)和eq(y)，但仍然不起作用。谢谢你。

编辑:好了，我想我知道我想要什么了。基本上:

我有这个选项选择器HTML:

<div id="mjsp-menu-select" style="float:right">
<select onchange="navigateTo(this, 'window');">
<option value="/example/example">Page 1</option>
<option value="/example/example?start=1" selected="selected">2</option>
<option value="/example/example?start=2">3</option>
<option value="/example/example?start=3">4</option>
<option value="/example/example?start=4">5</option>
<option value="/example/example?start=5">6</option>
<option value="/example/example?start=6">7</option>
<option value="/example/example?showall=1"> All Pages</option>
</select>
</div>

显示页面的位置:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pager">
  <br />
  <div class="myjsp-prev-next" style="text-align:inherit;">
    <span class="myjsp-prev"><a href="{url-prev}">Prev</a></span> 
    <span class="myjsp-next"><a href="{url-next}">Next</a></span>
  </div>
</div>
<br />

和这个Javascript:

$(function() {

document.querySelectorAll("#mjsp-menu-select option").length;
  $(document).keyup(function(e) {
    switch (e.keyCode) {
      case 37:
        var x = document.querySelectorAll(".myjsp-prev a")[0];
        var href = x.getAttribute('href');
        window.location = x;
        break;
      case 39:
        var y = document.querySelectorAll('.myjsp-next a')[0];
       var href = x.getAttribute('href');
        window.location = y;
        break;
    }
  });
});

目前，我可以使用方向键导航到上一页，但不能转到下一页。

我试图找到一种方法去计数有多少元素在选项选择器，然后将这些url存储到一个数组中附加一个start=1, start=2等，直到最大数量的url可在选项选择器中选择。

编辑:

我明白了:在第二种情况下，我用x代替y…

Answer 1

你可以像这样使用javascript查询选择器

var x = document.querySelectorAll(".myjsp-prev a")[0];
var href = x.getAttribute('href');

$(function() {
  $(document).keyup(function(e) {
    switch (e.keyCode) {
      case 37:
        var x = document.querySelectorAll(".myjsp-prev a")[0];
        console.log(x.getAttribute('href'));
        //window.location = x.attr('href');
        break;
      case 39:
        var y = document.querySelectorAll('.myjsp-next a')[0];
        console.log(y.getAttribute('href'));
        //window.location = y.attr('href');
        break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pager">
  <br />
  <div class="myjsp-prev-next" style="text-align:inherit;">
    <span class="myjsp-prev"><a href="{url-prev}">Prev</a></span> 
    <span class="myjsp-next"><a href="{url-next}">Next</a></span>
  </div>
</div>
<br />