Question

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

这是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");
});

文本更改，但是我想添加动画。我将如何去做？

谢谢

Answer 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>

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

1 个答案: