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("[e-mail]");
        else
        $self.text("Contact");
    });
});

html:

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

css:

#showemail:hover {
cursor:pointer;
}

谢谢!

Answer 1

您的文本最初有一些空白，trim it:

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

它工作的原因是第二次点击是因为你的else条件设置text为"接触"没有空白-然后下次你点击你的条件评估为true，一切都很好

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

Answer 2

这里有一个更新。注意装饰。似乎在#showemaildiv中有一些额外的文本需要修剪。

$(document).ready(function() {
    $("#showemail").click(function() {
        var $self = $(this);
        console.log($self.text());
        if ($self.text().trim() == "Contact") {
        $self.text("[e-mail]");
        }
        else {
        $self.text("Contact");
        }
    });
});