Question

我创建了一个附加

的按钮

var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);

我想通过单击按钮使用jquery更改按钮文本。

这就是我在做什么：

$(document).on('click', '.directly-follow', function() {
    event.preventDefault();
    var $post = $(this);
    if ($post.attr("text") == "Follow") {
        $post.text('Unfollow');
        //do something
     }
     else{
        $post.text('Follow');
        //do something
     }

问题是，行$post.text('Unfollow')更改了按钮文本，但它不会更改html标记（text="Follow"）中定义的文本。因此，功能不会像我想的那样切换。（if总是如此！）。

如何使用jquery更改文本？

Answer 1

要更改自定义attribute的值，您必须使用attr方法。

可以使用

attr方法获取attribute值，还可以设置attribute值。

该方法获取集合中第一个元素的属性值匹配元素或为每个匹配的元素设置一个或多个属性元件。

$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.attr("text") == "Follow") {
    $post.text('Unfollow');
    $post.attr('text','Unfollow');
 }
 else{
    $post.text('Follow');
    $post.attr('text','Follow');
 }

Answer 2

使用attr而不是文本。 https://jsfiddle.net/rhm3fkn4/5/

＆＃13;

var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';

$('.textWord_about> table > tbody').append(row);

$(document).on('click', '.directly-follow', function() {
  event.preventDefault();
  if ($(this).attr("text") == "Follow") {
      $(this).text('Unfollow');
      $(this).attr('text','Unfollow');
   }
   else{
      $(this).text('Follow');
      $(this).attr('text','Follow');
   }
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textWord_about">
  <table>
    <tbody>
      
    </tbody>
  </table>
</div>

＆＃13;

Answer 3

我想你想这样：

Fiddle

＆＃13;

var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);

$(document).on('click', '.directly-follow', function(event) {
    event.preventDefault();
    var $post = $(this);
    console.log($post.attr("text"))
    if ($post.attr("text") == "Follow") {
        $post.text('Unfollow');
				$post.attr("text","Unfollow")
        //do something
     }
     else{
        $post.text('Follow');
				$post.attr("text","Follow")
        //do something
     }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='textWord_about'>
  <table>
    <tbody></tbody>
  </table>
</div>
<div class='directly-follow'>

</div>

＆＃13;

Answer 4

您应该使用.data()来检索自定义属性（应该以“data - ”开头）。

然后，按钮没有text() ...但是html()有显示在其上的文字。

$(document).on('click', '.directly-follow', function() {
  event.preventDefault();
  var $post = $(this);
  if ($post.data("text") == "Follow") {
    $post.html('Unfollow');
    $post.data("text","Unfollow");
    //do something
  }
  else{
    $post.html('Follow');
    $post.data("text","Follow");
    //do something
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <button class="directly-follow btn" data-text="Follow">Follow</button>
    </td>
  </tr>
</table>

在追加后更改html中的文本值

4 个答案: