Wordpress 附件页面使用键盘导航答案

【问题标题】：Wordpress Attachment Page Navigate with KeyboardWordpress 附件页面使用键盘导航
【发布时间】：2016-08-22 15:03:56
【问题描述】：

我正在使用 WordPress。

我想用 left 和 right 键浏览我的附件页面。

这是我的代码，但不起作用；

function GoToLocation(url)
  {
    window.location = url;
  }

  Mousetrap.bind("j", function() {
    //alert('j pressed' + document.getElementById("next").href);
    //document.getElementById("next").click();
    window.location=<?php echo $image->next_image_link ?>;
  });

<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>

如果我改变它

window.location=<?php echo $image->next_image_link ?>;

到这里

window.location="http://mylink.com";

脚本运行良好。但我不能使用基于 WordPress 的链接（例如 next_image_link();）

我能做什么？

【问题讨论】：

标签： wordpress mousetrap

【解决方案1】：

将window.location=<?php echo $image->next_image_link ?>; 替换为 window.location="<?php echo $image->next_image_link ?>";。您的字符串声明无效，因此无法正常工作。

PHP 不会用引号回显链接。

编辑：Wordpress 不只打印 URL。它打印链接元素。所以解决方案是

绑定到现有导航
使用正则表达式截断htmt语法

var element = '<?php echo $image->next_image_link ?>'; window.location = element.match(/href="([^"]*)/)[1];

【讨论】：

感谢您的帮助，但是当我使用您编辑的代码按“j”时，页面正在重新加载相同的 url。

【解决方案2】：

我自己做的，

首先将此添加到顶部

<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>

然后也添加这个脚本

function GoToLocation(url)
  {
    window.location = url;
  }
  Mousetrap.bind("right", function() {
document.getElementById('next-page').click();
  });



function GoToLocation(url)
  {
    window.location = url;
  }
  Mousetrap.bind("left", function() {
document.getElementById('prev-page').click();
  });

最后，将 "next-page" , "prev-page" ID 放到链接标签的位置例如；

<a id="next-page"></a>

或

<a id="prev-page"></a>

因此，当您按下左或右键盘按钮时，脚本将正常运行。再见

【讨论】：