如何使用 Jquery 向按钮添加属性？答案

【问题标题】：how to add an attribute to a button with Jquery?如何使用 Jquery 向按钮添加属性？
【发布时间】：2019-05-23 14:55:59
【问题描述】：

我有一个显示“搜索”的按钮，单击该按钮时，我希望文本更改为“搜索”并在其旁边添加一个旋转动画。

这里是 HTML

<button type="submit" class="btn btn-primary btn-lg " id="search" data- 
loading-text="<i class='fa-spin fas fa-circle-notch'> 
</i>Searching">Search
</button>

这是我的 Jquery

$('button#search').click(function() {
$(this).text("Searching");
});

文字发生了变化，但我想添加动画。我该怎么做呢？

谢谢

【问题讨论】：

欢迎来到 Stack Overflow！ SO 的工作方式，您的整个问题（包括任何必要的代码）必须in 您的问题，而不仅仅是链接。两个原因：人们不应该去场外帮助你；和链接腐烂，使问题及其答案对未来的人们毫无用处。请在问题中输入minimal reproducible example in。更多：How do I ask a good question? 和 Something in my web site or project doesn't work. Can I just paste a link to it?
当您提出不允许使用没有代码的代码笔的问题时，您被警告，然后您将文本放入代码块中以绕过它，这一事实立即得到了我的反对。

标签： jquery html

【解决方案1】：

你可以试试这个：需要稍微修改一下代码

$(document).ready(function(){

    $(".pushme").click(function () {
       $(this).text("DON'T PUSH ME");
    });
    
    $(".pushme-with-color").click(function () {
       $(this).text("DON'T PUSH ME");
       $(this).addClass("btn-danger");
       $(this).removeClass("btn-warning");
    });
    

    $(".pushme2").click(function(){
		$(this).text(function(i, v){
		   return v === 'PUSH ME' ? 'PULL ME' : 'PUSH ME'
		});
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>

<section>
<div class="row">
    <span class="col-lg-6 col-md-6 col-xs-6">
    <div class="row text-center">
    <button class='btn btn-warning pushme'>PUSH ME</button>
    </div>
    <div class="row">
    </div>
    </span>

</div>

</section>
</body>

【讨论】：