Question

我对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未被隐藏。

任何指针都会受到赞赏。

编辑：10/10/12

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

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

我需要使用箭头键来浏览页面，所以我将为此添加一些Jquery，正如我们已经讨论的那样：http://jsfiddle.net/edzpgt/b2bWz/3/

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

有人可以帮忙吗？

Answer 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');

Answer 2

jQuery有一个很好的.trigger()函数，可能对你有用。

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

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

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

<强> EXAMPLE:

<强> HTML

<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");
   });

Answer 3

将有两个a代码。一个用于下一个，另一个用于之前。所以首先你必须找到那些。假设它们包含ID nextSlide和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;
 }

});

触发嵌套的javascript函数

3 个答案: