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

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

保持与您目前的代码尽可能接近，例如，您可以在 <a> 标签中添加一个 id 以便更容易识别它

<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>

它的工作方式是它使用getElementById 方法来获取确切的标签并将对它的引用存储在一个名为link 的变量中，然后您可以对其执行任何您希望的操作，例如setAttribute

但我很想为此采取不同的方法

<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>

这里发生了什么，您首先存储一个名为whichAction 的变量并将其设置为值1。当您单击该链接时，将调用一个名为doAction() 的函数，该函数查看值whichAction 并执行任何适当的任务。当然，如果您将来需要有更多选择，您可以在此处添加任意数量的案例。

现在您的 changeLink() 函数需要做的就是更改您的 whichAction 变量的值。

还有一点需要注意，在doAction()函数的末尾，你必须有return false;，这告诉浏览器不要继续跟踪href=属性中的链接。

Answer 2

由于<li> 元素具有profile-gallery__item 类，您可以这样做。

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