Question

有一个我用作按钮的基本链接，当用户点击它以从编辑到完成编辑时更改文本。当我第一次点击按钮时，发生了点击事件，但是文字没有改变，直到我再次点击它，它就像我想要的那样没有表现出来：

HTML：

 <a type="button" id="editButton" class="editButton" style="cursor: pointer">EDIT</a>

JS：

$("#editButton").click(function () {
    var $this = $(this);
    $this.toggleClass('editButt');
    if ($this.hasClass('editButt')) {
        $this.text('EDIT');
    } else {
        $this.text('DONE EDITING');
    }
});

Fiddle

Answer 1

您切换第一次点击时不存在的类，这意味着它会添加它然后运行您的条件。

添加课程并解决问题

<a type="button" id="editButton" class="editButton editButt" style="cursor: pointer">EDIT</a>

http://jsfiddle.net/U8Ns3/4/

Answer 2

试试这个，然后看fiddle

$("#editButton").click(function () {
    var $this = $(this);
    if ($this.hasClass('editButt')) {
        $this.text('EDIT');
    } else {
        $this.text('DONE EDITING');
    }
    $this.toggleClass('editButt');
});

Answer 3

更简单的解决方案，这是一个 FIDDLE

<button type="button" id="editButton" class="edit">EDIT</button>


$('#editButton').click(function() {
  var text = ($(this).text() === 'EDIT') ? 'DONE EDITING' : 'EDIT';
  $(this).text(text).toggleClass('done');
});

JQuery OnClick不会在第一次单击时更改文本

3 个答案: