Question

如何在点击事件中正确更改/更新按钮的文本和字体图标？

$(".btn-warning").click(function() {
      $(this).toggle(function() {
          $('.btn-warning').text("Remove Filter <i class='fa fa-filter'></i>");
      }, function() {
          $('.btn-warning').text("Apply Filter <i class='fa fa-remove'></i>"); 
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

Answer 1

你在这里。

$(".btn-warning").click(function() {
    var $btn = $(this);
    if ($btn.hasClass('x-on')) {
        $btn.removeClass('x-on').html("Apply Filter <i class='fa fa-filter'></i>");
    } else {
        $btn.addClass('x-on').html("Remove Filter <i class='fa fa-remove'></i>");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

Answer 2

toggle不适用于此代码。这并不意味着do this或do something else-当您toggle时，会导致JQuery淡入/移入元素，并在动画完成时执行函数调用。

因此，您click并淡出了该元素，但是现在click上没有任何内容可以将其恢复，并且您的更改将不会显示。

要更改点击代码，我们只需在函数本身（this.clicked）上设置一个变量，然后根据是第一次还是第二次点击切换元素的html。这将通过检查this.checked是对还是假来确定。

$(".btn-warning").click(function() {
  if (this.clicked == undefined) this.clicked = false;
  this.clicked = !this.clicked;

  (this.clicked) ?
  $('.btn-warning').html("Remove Filter <i class='fa fa-filter'></i>") :
  $('.btn-warning').html("Apply Filter <i class='fa fa-remove'></i>");
});

$(".btn-warning").click(function() {
  let btn = $(".btn-warning");
  if (this.clicked == undefined) this.clicked = false;
  this.clicked = !this.clicked;

  (this.clicked) ?
  btn.html("Remove Filter <i class='fa fa-filter'></i>") :
  btn.html("Apply Filter <i class='fa fa-remove'></i>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

Answer 3

（1） JQuery toggle()方法将切换按钮的可见性，您不需要这一点。

（2）如果需要更改元素的 html ，请不要使用text()方法，而要使用html()方法。 text()方法将无法识别您想要的html标记。

您可以使用的一种方法是检测按钮内的<i>标签是否具有某些类（请参阅hasClass()），然后根据以下条件进行操作：

$(".btn-warning").click(function()
{
    if ($(this).find("i").hasClass("fa-filter"))
        $(this).html("Remove Filter <i class='fa fa-remove'></i>");
    else
        $(this).html("Apply Filter <i class='fa fa-filter'></i>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<button type="button" class="btn btn-warning">
  Apply Filter <i class="fa fa-filter"></i>
</button>

Answer 4

尝试一下。我认为这或多或少会让您入门。

https://jsfiddle.net/3bq9fuwz/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

            $(".btn-warning").click(function() {
              $(this).html('It is a new name bro');
              $(this).find($(".fa")).removeClass('fa-filter').addClass('fa-remove');
            });

点击事件无法更新按钮文本和字体图标

4 个答案: