Question

请帮助解决我的问题。我是JS的新手所以我无法理解如何执行此操作：我需要替换以下字符串中的参数

<a href="javascript:PhotoUploadDialog.show(false, 'crop_moderation_split');" class="profile-gallery__item__link"></a>

到

<a href="javascript:PhotoUploadDialog.show(false, 'crop_split');" class="profile-gallery__item__link"></a>

使用GreaseMonkey脚本的现有页面。以下是页面HTML代码本身的一部分：

<div class="profile-gallery-inner-wrapper">
        <ul class="profile-gallery js-photos-container">

            <!--Empty sections-->

            <li class="profile-gallery__item profile-gallery__item--no-image">
                <a href="javascript:PhotoUploadDialog.show(false, 'crop_moderation_split');" class="profile-gallery__item__link"></a>
            </li>)

        </ul>

        <!--Gallery navigation-->

    </div>

请帮我解决JS代码。

UPD。解决了这个问题。它现在运行。有点不像预期，但它的工作原理。

// ==UserScript==
// @name        Kismia
// @namespace   kismia.com
// @match       *://*kismia.com/*
// @require     https://code.jquery.com/jquery-3.1.0.min.js
// @version     1
// @grant       none
// ==/UserScript==

function ch_href () {

var a = document.querySelector('.profile-gallery__item__link');
if (a) {
a.setAttribute('href', 'javascript:PhotoUploadDialog.show\(false,     \'crop_split\'\)\;');
}
}
ch_href();

$(window).load (ch_href);

Answer 1

由于<li>元素具有类profile-gallery__item，因此您可以执行此操作。

let anchor = document.getElementsByClassName("profile-gallery__item a")
anchor.setAttribute("href", "javascript:PhotoUploadDialog.show(false, 'crop_split');")

Answer 2

只需选择锚元素并更改属性。

const anchor = document.querySelector('.profile-gallery__item__link');
anchor.setAttribute('href', 'javascript:PhotoUploadDialog.show(false, 'crop_split');')

如果你需要更改多个链接的属性，你可以选择它们并在循环中这样做：

const anchorAll = document.querySelectorAll('.profile-gallery__item__link');
for (let i = 0; i < anchorAll.lenght; i++) {
  anchorAll[i].setAttribute('href', "javascript:PhotoUploadDialog.show(false, 'crop_split');")}

Answer 3

与您目前的代码保持一致，您可以在var myString = "$("#mycustomtext").CustomMethod()"; document.title = myString;标记中添加ID，以便更轻松地识别它，例如

<a>

它的工作方式是使用getElementById方法获取精确标记并在名为<a id="myLink" href="javascript:PhotoUploadDialog.show(false, 'crop_moderation_split');" class="profile-gallery__item__link"></a> <script> function changeLink() { var link = document.getElementById("myLink"); link.setAttribute('href', "javascript:PhotoUploadDialog.show(false, 'crop_split');"); } </script>的变量中存储对它的引用，然后您可以对其执行任何操作，例如作为setAttribute

但是我很想采用不同的方法来实现这个目标

link

这里发生了什么，是你首先存储一个名为<a href="#" onClick="doAction()" class="profile-gallery__item__link"></a> <script> var whichAction = 1; function doAction() { switch (whichAction) { case 1: PhotoUploadDialog.show(false, 'crop_moderation_split'); break; case 2: PhotoUploadDialog.show(false, 'crop_split'); break; } return false; } function changeLink() { whichAction = 2; } </script>的变量并将其设置为值1.当你点击链接时，会调用一个名为whichAction的函数，它看起来像在doAction()的值，并执行适当的任务。当然，如果您将来需要更多选择，可以在此处添加尽可能多的案例。

现在，您的所有whichAction功能都需要更改changeLink()变量的值。

还有一点需要注意，在whichAction函数的末尾，您必须有doAction()，这会告诉浏览器不要继续关注return false;属性中的链接

如何使用JS更改<div>中<li>内部元素的<href>？

3 个答案: