Question

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

我用作参考：Bind Keyboard to left/right navigation

我有这个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选择具有该类的元素，然后转到下一个或上一个网址。

我正在阅读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>

我在控制台日志中收到错误：
未捕获的TypeError：y.attr不是函数

未捕获的TypeError：x.attr不是函数

我也尝试了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>

此HTML用于显示页面的位置：

<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。

修改

Nvm我明白了：在第二种情况下，我有x而不是y ...

Answer 1

您可以使用javascript查询选择器。

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

＆＃13;

$(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;
    }
  });
});

＆＃13;

<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 />

＆＃13;

窗口和属性URL的类的层次结构元素选择

1 个答案: