如何制作一个自动点击具有特定 rel 属性 的锚标记的按钮？

Question

我正在尝试制作一个浮动在右上角的按钮，该按钮可以单击 rel 属性 设置为 "next" 的锚标记。标签的代码是： <a href="website" rel="next"><span class="meta-nav screen-reader-text">Next Post</span> Next Chapter</a>

到目前为止我已经写了这个：

    var button = document.createElement("Button");
    button.innerHTML = "Next";
    button.style = "top:0;right:0;position:fixed;z-index: 9999"
    button.onclick = function(){
        var x = document.querySelector("a");
        for (var i = 0; i < x.length; i++) {
            if(document.x[i].rel = "next"){
               window.location.href = x[i].href;
            }
        }
    }
    document.body.appendChild(button);

当我点击生成的按钮时，它并没有点击锚标签。有人可以帮忙吗？

Answer 1

您可以使用 .rel 选择器：

const button = document.createElement("Button");
button.innerHTML = "Title";
button.style = "top:0;right:0;position:fixed;z-index: 9999"
button.onclick = function() {
  const link = document.querySelector("a").rel = "next"
  window.location.href = link.href;
}
document.body.appendChild(button);

<a href="https://systemtranslation.home.blog/2019/12/20/i-d-w-a-t-s-chapter-18-must-eliminate-the-danger/" rel="next"><span class="meta-nav screen-reader-text">Next Post</span> Next Chapter</a>

Answer 2

你想要这样的东西：

var button = document.createElement("Button");
button.innerHTML = "Title";
button.style = "top:0;right:0;position:fixed;z-index: 9999"
button.onclick = function(){
  var x = document.querySelector("a[rel='next']");
  window.location.href = x.href;
}
document.body.appendChild(button);

查看这个 jsfiddle：https://jsfiddle.net/nharding/f3m6h74r/18/