我正在尝试编写一个用户脚本
- 在每个超链接后添加一个复选框
- 然后,单击该复选框后,相应的超链接将其状态更改为“已访问”。 (颜色将从蓝色变为紫色。)
问题是我不明白如何将 href
值从 a
元素“移动”到 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();
})();
最佳答案
要完成此操作,您需要在 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();
关于javascript - 获取相对定位元素的 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59214416/