Question

我正在使用按钮标签创建的多个按钮，我想在单击该按钮时单独更改每个按钮的文本。
我正在尝试使用以下代码，但它根本不起作用.. 我怎么能用按钮标签来做... 感谢...

Html代码

user1
<button class="toggle" href="/" onclick ="myFunction(this)">connect</button>
user2
<button class="toggle" href="/" onclick ="myFunction(this)">connect</button>
user3
<button class="toggle" href="/" onclick ="myFunction(this)">connect</button>

和js代码是

<script>
function myFunction(obj) {
if (obj.value == "Connected")
    obj.value = "Connect";
else
    obj.value = "Connected";
}
</script>

Answer 1

您需要更改innerText而不是值，并且区分大小写

按钮具有值属性但不具有href属性

注意如果按钮位于表单中，则需要使用type="button"或添加preventDefault以不提交表单

内联普通JS：

function myFunction(obj) {
  obj.innerText = obj.innerText == "Connect" ? "Connected" : "Connect";
}

user1
<button class="toggle"  onclick="myFunction(this)">Connect</button> user2
<button class="toggle"  onclick="myFunction(this)">Connect</button> user3
<button class="toggle"  onclick="myFunction(this)">Connect</button>

jQuery - 带链接

$(function() {
  $(".toggle").on("click", function() {
    var text = $(this).text(), link = $(this).data("url");
    $(this).text(text == "Connect" ? "Connected" : "Connect");
    $("#somediv").load(url);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
user1
<button data-url="user1.html" class="toggle">Connect</button> user2
<button data-url="user2.html" class="toggle">Connect</button> user3
<button data-url="user3.html" class="toggle">Connect</button>

Answer 2

您需要使用firstChild.nodeValue代替value

function myFunction(obj) {
if (obj.firstChild.nodeValue == "Connected")
    obj.firstChild.nodeValue = "Connect";
else
    obj.firstChild.nodeValue = "Connected";
}

user1
<button class="toggle" href="/" onclick ="myFunction(this)">connect</button>
user2
<button class="toggle" href="/" onclick ="myFunction(this)">connect</button>
user3
<button class="toggle" href="/" onclick ="myFunction(this)">connect</button>

Answer 3

当您添加jquery标记时，您可以这样做：

function myFunction(obj) {
  var o = $(obj);
  if (o.text() === "Connected")
      o.text("Connect");
  else
      o.text("Connected");
}

小提琴：https://jsfiddle.net/j0z495et/

Answer 4

尝试使用obj.innerText代替obj.innerTex

<script type="text/javascript">
function myFunction(obj) {
if (obj.innerText == "Connected")
obj.innerText = "Connect";
else
obj.innerText = "Connected";
}
</script>

如何在单击多个按钮后使用<button>标签更改创建的按钮文本？

4 个答案: