jQuery单击事件以交换文本，但不会在第一次单击时触发

Question

我是javascript和jquery的新手，我有这段代码将一个文本替换为另一个文本， 除了第一次单击div 之外 ，其他文本都可以正常工作。

有任何想法吗？ 我可能只是在呼吁错误，但不确定如何进行

这是一个小提琴： http : //jsfiddle.net/pauljackson/4r8v6/

JS：

$(document).ready(function() {
    $("#showemail").click(function() {
        var $self = $(this);
        if ($self.text() == "Contact")
        $self.text("someguy@theinternet.com");
        else
        $self.text("Contact");
    });
});

HTML：

<div id="showemail">
Contact
</div>

CSS：

#showemail:hover {
cursor:pointer;
}

谢谢！

Answer 1

您的文本最初有一些空格，请对其进行trim ：

if ($self.text().trim() == "Contact")

第二次单击有效的原因是，您的else条件将text设置为“ Contact”而没有空格-然后，下次单击条件时，结果为true ，一切都很好

小提琴： http : //jsfiddle.net/4r8v6/3/

Answer 2

继承人更新。 注意装饰。 似乎#showemail div中还有一些其他文本需要修剪。

$(document).ready(function() {
    $("#showemail").click(function() {

        var $self = $(this);
        console.log($self.text());
        if ($self.text().trim() == "Contact") {
        $self.text("someguy@theinternet.com");
        }
        else {
        $self.text("Contact");
        }
    });
});