Javascript 如何在用鼠标单击时更改锚文本？

这是我的网站。所有的代码+图像+css都可以访问任何人

当任何人单击“收听”按钮时，其背景会变为“停止收听”，反之亦然。这是我想要的功能，我使用jQuery获得了它

我现在也要的是文字也相应地改变。比如，当有人点击“listen”锚时，它的文本应该变为“stop listening”，stop listening锚也是如此。就像拨动锚一样

谢谢你的帮助！非常感谢……：）

在线演示：

---

UDPATE

我看到您正在使用一个类来控制侦听/停止状态。也许这样会更好

$("a").click(function(){
    if($(this).is(".listen")){
        $(this).text("Stop listening").removeClass("listen");
    } else {
        $(this).text("Listen").addClass("listen");
    }
});

在线演示：

---

UDPATE

我看到您正在使用一个类来控制侦听/停止状态。也许这样会更好

$("a").click(function(){
    if($(this).is(".listen")){
        $(this).text("Stop listening").removeClass("listen");
    } else {
        $(this).text("Listen").addClass("listen");
    }
});

---

在Javascript中，可以使用innerHTML属性访问和/或更改元素的HTML文本

getElementById("first").innerHTML = "newtext"

---

在Javascript中，可以使用innerHTML属性访问和/或更改元素的HTML文本

getElementById("first").innerHTML = "newtext"

---

在这里，我使用您的源代码制作了这个JSFIDLE

以下是jQuery代码：

$(function(){
    $("#container a").click(function(){
        if ($(this).html() == "Stop Listening")
        {
            $(this).html("Listen");
        }
        else if ($(this).html() == "Listen")
        {
            $(this).html("Stop Listening");
        }
    });
});

---

这将简单地检查锚上的文本是“停止侦听”还是“侦听”，如果是，它将在您按下按钮时切换。这确实是最优雅的解决方案。

在这里，我使用您的源代码制作了这个JSFIDLE

以下是jQuery代码：

$(function(){
    $("#container a").click(function(){
        if ($(this).html() == "Stop Listening")
        {
            $(this).html("Listen");
        }
        else if ($(this).html() == "Listen")
        {
            $(this).html("Stop Listening");
        }
    });
});

---

这将简单地检查锚上的文本是“停止侦听”还是“侦听”，如果是，它将在您按下按钮时切换。这确实是最优雅的解决方案。

不起作用。是因为我使用的是一个first而不是id的类吗？我也试过了，但没用（我在你发布的链接上进行了测试，效果非常好。链接中的id是“first”。谢谢你，amosrivera。刚刚将其上传到我的服务器上，效果很好。：）非常感谢。只有一件事，这个新脚本使我的悬停状态出现故障。再次查看该网站，最后一个网站的悬停状态非常完美（因为我没有添加脚本）。但是其他脚本的悬停脚本无法正常运行。你能帮我解决这个问题吗。非常感谢！非常感谢……）如果转到并单击该按钮，文本和背景都会发生变化。：）但“侦听”和“停止侦听”锚的悬停状态保持不变。查看网页的源代码，最后我有了一个脚本，它以前通过相应地更改两个锚的类来更改悬停状态。请注意，当我在最后一个“停止侦听”中不使用您的脚本时，它会更改背景和悬停状态，但不会更改文本。这就是我希望所有悬停状态的方式。不工作。是因为我使用的是一个first而不是id的类吗？我也试过了，但没用（我在你发布的链接上进行了测试，效果非常好。链接中的id是“first”。谢谢你，amosrivera。刚刚将其上传到我的服务器上，效果很好。：）非常感谢。只有一件事，这个新脚本使我的悬停状态出现故障。再次查看该网站，最后一个网站的悬停状态非常完美（因为我没有添加脚本）。但是其他脚本的悬停脚本无法正常运行。你能帮我解决这个问题吗。非常感谢！非常感谢……）如果转到并单击该按钮，文本和背景都会发生变化。：）但“侦听”和“停止侦听”锚的悬停状态保持不变。查看网页的源代码，最后我有了一个脚本，它以前通过相应地更改两个锚的类来更改悬停状态。请注意，当我在最后一个“停止侦听”中不使用您的脚本时，它会更改背景和悬停状态，但不会更改文本。这就是我想要的所有悬停状态。我已经发布了一个答案下面使用您的确切来源。去JSFIDLE吧，我查过了。工作完美。非常感谢你的时间和努力。真的很感激，伙计们！：）我已经发布了一个答案下面使用您的确切来源。去JSFIDLE吧，我查过了。工作完美。非常感谢你的时间和努力。真的很感激，伙计们！：）谢谢这太完美了。非常感谢！不客气。顺便说一句，我刚刚做了最后一个更改（在更改您放入链接容器中的任何链接之前，现在它只影响“收听”和“停止收听”链接），谢谢。这太完美了。非常感谢！不客气。顺便说一下，我刚刚做了最后一个更改（在更改您放入链接容器中的任何链接之前，现在它只影响侦听和停止侦听的链接）