Question

我有一个使用Bootstrap的站点，以及使用KendoUI创建的数据网格，每行包含一个表单按钮...

<button type="button" id="requestbtn1" class="btn btn-success">Request</button>

我使用以下Javascript ...

连接了这些按钮的点击事件

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  this.html("Done");
  this.addClass("btn-primary");
  this.removeClass("btn-success");
});

调用代码，警报显示正确的数字，但我试图将按钮的文本更改为“完成”，将CSS类更改为“btn-primary”以提醒用户他们已经发出此请求

最后三行都不起作用。我最初将它们全部放在一行中，就像这样......

  this.html("Done").addClass("btn-primary").removeClass("btn-success");

...但是将它们分开以查看是否有任何独立的工作。

任何人都知道如何更改文本和CSS类？

Answer 1

您尝试在本机DOM节点（html()）上调用jQuery方法（addClass()，removeClass()，this等）;无权使用此类方法。如果您正在使用jQuery，请记住使用jQuery。或者，至少，请记住您是否正在使用DOM或jQuery。

尝试：

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  $(this).html("Done").addClass("btn-primary").removeClass("btn-success");
});

或者，使用原生DOM替代方案：

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  this.innerHTML = 'Done';
  this.classList.add('btn-primary');
  this.classList.remove('btn-success');
});

Answer 2

使用此

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  var $this = $(this);
  Sthis.html("Done");
  Sthis.addClass("btn-primary");
  Sthis.removeClass("btn-success");
});

如何更改按钮内的文字？

2 个答案: