2

我对javascript比较陌生，我整天都在努力解决一个问题——我希望有人能指出我正确的方向。

我有一个做幻灯片的 PHP 脚本。我有 NEXT 和 PREVIOUS 按钮，其中包含指向另一个 javascript 函数的动态链接。我希望找到一种用键盘上的箭头键触发它们的方法。

到目前为止，我已经找到了一种让箭头键启动特定 URL 的方法，但我现在有点挣扎。由于隐藏和显示页面上的 DIV，目标 URL 会发生变化。所以我认为我需要执行以下操作之一：

稍后在页面主体中使用 PHP 变量中构造的 URL 触发此代码 - 无需刷新页面：

<script type="text/javascript">

$(document).keydown(function(e){

 //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
 var keyCode = e.keyCode || e.which;

if (keyCode == 37)
 {
 window.location = 'http://www.domain.com/previous-image.jpg';
 return false;
 }

 if (keyCode == 39)
 {
 window.location = 'http://www.domain.com/next-image.jpg';
 return false;
 }

});

</script>

...或者我需要找到一种方法来触发特定名称的 DIV 中的链接 - 但前提是 DIV 没有隐藏。

任何指针将不胜感激。

编辑：2012 年 10 月 10 日

感谢大家到目前为止的帮助。我现在明白了一点，也许我可以更清楚地了解我想要实现的目标。

我有一个包含 5 个 DIV 的页面 - 其中 4 个是隐藏的。除了其中显示的图像之外，每个都是相同的，我使用以下代码隐藏或显示各种 DIV：http: //jsfiddle.net/edzpgt/ZhjRc/12/

我需要使用箭头键来导航页面，所以我将为此添加一些 Jquery，因为我们已经讨论过：http: //jsfiddle.net/edzpgt/b2bWz/3/

我想我有两个问题： 1. 我不确定我的语法是否正确，以确保我只使用可见 DIV 中的箭头键链接。2. 我认为我没有正确设置或使用下一个/上一个页码变量，以便将正确的目标 URL 传递给 Jquery。

有人可以帮忙吗？

4

3 回答 3

1

1）你不需要处理e.keyCode || e.which. jQuery 会为您做到这一点。只需使用e.which

2）最好在处理程序之外创建两个函数，以便您可以从其他地方调用它们：

function previousLocation() {
    window.location = 'http://www.domain.com/previous-image.jpg';
}

function nextLocation() {
    window.location = 'http://www.domain.com/next-image.jpg';
}

$(document).keydown(function (e) {
    var keyCode = e.which;

    if (keyCode == 37) {
        previousLocation();
        return false;
    }

    if (keyCode == 39) {
        nextLocation();
        return false;
    }

});

3）但如果你真的需要触发 - 这里的例子：

$(document).keydown(function (e) {
    var keyCode = e.which;

    function previousLocation() {
        window.location = 'http://www.domain.com/previous-image.jpg';
    }

    function nextLocation() {
        window.location = 'http://www.domain.com/next-image.jpg';
    }

    $(document).bind('goprev', previousLocation);
    $(document).bind('gonext', nextLocation);

    if (keyCode == 37) {
        previousLocation(); // no problems here
        return false;
    }

    if (keyCode == 39) {
        nextLocation(); // no problems here
        return false;
    }

});

// external call example
$(document).trigger('goprev');
$(document).trigger('gonext');
于 2012-10-08T16:33:00.627 回答
0

jQuery 有一个不错的.trigger()功能，可能对您有用。

if (keyCode == 37)
 {
 $("#next").trigger("click");
 return false;
 }

 if (keyCode == 39)
 {
 $("#prev").trigger("click");
 return false;
 }

您需要用有效的选择器替换下一个#next和#previous上一个链接。如果没有 HTML，我将它们用作占位符。

例子：

HTML

​&lt;a href="#" rel="next">next</a>
<a href="#" rel="prev">prev</a>​

jQuery

    $(document).keydown(function(e){
      //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
      var keyCode = e.keyCode || e.which;

      if (keyCode == 37)
      {
       $("a[rel='prev']").trigger("click");
       return false;
      }
     else if (keyCode == 39)
     {
       $("a[rel='next']").trigger("click");
       return false;
     }
   });
   $("a[rel='next']").click(function(){
      alert("next");
   });

   $("a[rel='prev']").click(function(){
      alert("prev");
   });
于 2012-10-08T16:28:53.137 回答
0

会有两个a标签。一个用于下一个，另一个用于上一个。所以首先你必须找到那些。假设他们有 idsnextSlide和prevSlide,

<a id="prevSlide" href="http://www.domain.com/previous-image.jpg">Previous</a>
<a id="nextSlide" href="http://www.domain.com/next-image.jpg">Next</a>

你已经重写了你的代码，如下所示

$(document).keydown(function(e){

 //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
 var keyCode = e.keyCode || e.which;

if (keyCode == 37)
 {
 window.location  = $("#prevSlide").attr("href");
 return false;
 }

 if (keyCode == 39)
 {
 window.location  = $("#nextSlide").attr("href");
 return false;
 }

});
于 2012-10-08T16:29:53.390 回答