获取相对位置元素的 href。

Question

获取相对位置元素的 href。

javascriptjquerytampermonkeyuserscripts

3

我正在尝试编写一个用户脚本，该脚本将：

在每个超链接后面添加一个复选框
然后，在单击复选框后，相应的超链接将更改其状态为“已访问”。（颜色将从蓝色更改为紫色。）

问题在于，我不知道如何将 a 元素的 href 值“移动”到 desired_element 变量中。

为了使示例相对简单，我使用维基百科。但是，在现实生活中，它被用于不同的HTML结构，因此可能最好使用jQuery。（可能使用.closest 然后使用 .find？）

维基百科案例：

<p>In <a href="/wiki/Computer_programming">computer
programming<input type="checkbox"></a>, a naming convention
is...</p>
<!-- https://en.wikipedia.org/wiki/Naming_convention_(programming) -->

真实案例：

<div>
    <figure>
        <div>
            <div>
                <img src="image.png">
            </div>
            <a href="https://example.com/>Click Me</a>
        </div>
    </div>
    <input type="checkbox">
</div>

// ==UserScript==
// @grant   none
// @match   https://*.wikipedia.org/*
// @name    Wikipedia
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';

    function actionFunction() {
        var links = document.querySelectorAll('a');
        var i;
        for (i = 0; i < links.length; i++) {
            var input = document.createElement('input');
            input.setAttribute('type', 'checkbox');
            //input.addEventListener("change", aaa);
            input.onchange = function() {aaa()};
            links[i].appendChild(input);          
        }
    }

    function aaa() {
        var current_url;
        // var desired_url = something?.parentNode.href;

        // store the current URL
        current_url = window.location.href;

        // use replaceState to push a new entry into the browser's history
        history.replaceState({}, '', desired_url);

        // use replaceState again to reset the URL
        history.replaceState({}, '', current_url);
    }

    actionFunction();
})();

- john c. j.

1

@RoryMcCrossan 通过绝对URL测试，可以正常工作（var desired_url ='https://...'）。这个想法来自于这里：https://dev59.com/x3RA5IYBdhLWcg3w4R_o。 - john c. j.

我改正了 :) - Rory McCrossan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

为了使这个工作起来，你需要在 aaa() 函数中获取元素的引用。为了做到这一点，你可以将它作为参数传递，或者你可以使用 addEventListener 并在事件处理程序中使用 this 引用引发事件的元素。后者是更好的实践方式。

然而值得注意的是，你不能在 a 元素内包含复选框，因为你不能嵌套可点击的元素。输入框需要成为 a 的同级元素，这可以通过将其附加到父元素来实现。你还可以将 URL 存储为 input 中的数据属性，而不必遍历 DOM 来查找相关的 a。尝试这个：

function actionFunction() {
  var links = document.querySelectorAll('a');
  var i;
  for (i = 0; i < links.length; i++) {
    var input = document.createElement('input');
    input.type = 'checkbox';
    input.dataset.url = links[i].href;
    input.addEventListener("change", aaa);
    links[i].parentElement.insertBefore(input, links[i].nextSibling);
  }
}

function aaa() {
  let desired_url = this.dataset.url;
  let current_url = window.location.href;
  history.replaceState({}, '', desired_url);
  history.replaceState({}, '', current_url);
}

actionFunction();