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

Question

This is my website. http://www.sarahjanetrading.com/js/j/index.html All the code+images+css is there with access to anyone

When anyone clicks on the listen button its background changes into the stop listening and vice versa. This is the functionality I wanted and I got it using jQuery.

What I also want now is the text to change too accordingly. Like, when someone clicks on the "listen" anchor, its text should change to "stop listening", and the same for the stop listening anchor. Like a toggle anchor.

Thanks for the help ! Really appreciate it... :)

Answer 1

$("#first").toggle(function(){
    $(this).text("Stop listening");
}, function(){
    $(this).text("Listen");
});

Online demo: http://jsfiddle.net/5AUdJ/

---

UDPATE

I see you are using a class to control the listen/stop state. Maybe this will work better.

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

Answer 2

Here, I made this JSFiddle using your source code.

http://jsfiddle.net/K4Njj/2/

Here is the jQuery code:

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

That will simply check to see if the text on the anchor is "Stop Listening" or "Listen" and if it is, it will switch it when you hit the button. It's really the most elegant solution.

Answer 3

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

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