jquery 单击时更改 class 按钮内的跨度

Question

我有一个如下所示的按钮，我想更改其上的 class span 名称。但是下面的代码不起作用。我该怎么做？

<button id="btn_new">
<span class="ui-icon ui-icon-plus"></span>new
</button>

jquery代码：

$('#btn_new').click(function({
   $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

我也试过这个：

$('#btn_new').click(function({
   $(this).find('span').removeClass('ui-icon-plus').addClass('ui-icon-tick');
});

Answer 1

$('#btn_new').click(function(e){
   e.preventDefault();   
   var caption=$.trim($(this).text());
   var icon=$(this).find('span');
   if(caption == 'new'){ 
    $(this).text('save'); 
    icon.toggleClass('ui-icon-plus ui-icon-check'); 
   } 
});

Answer 2

您忘记在点击事件中关闭括号。 function()

$('#btn_new').click(function(){ //Here
   $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

Working Fiddle

Answer 3

Working Fiddle

$('#btn_new').click(function(){

   $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

Answer 4

$('#btn_new').click(function(){
   $(this).find('span').toggleClass('ui-icon-plus').toggleClass('ui-icon-tick');
});

Answer 5

请试试这个

$(document).ready(function(){
    $('#btn_new').click(function(){
    $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
    });
});

另外请不要忘记添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

如果没有添加

Answer 6

我在这里试过，但使用了不同的 class

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_new").click(function(){
   $(this).find('span').toggleClass('main');
});
});
</script>
<style>
.main {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>
<button type="button" id="btn_new">
<span class="main">new</span>
</button>

</body>
</html>

它的工作原理

Answer 7

好吧，你可以像这样尝试 removeClass 和 addClass

$('#btn_new').click(function({ 
      $(this).find('span').removeClass('ui-icon-plus');
      $(this).find('span').addClass('ui-icon-tick');
});

Answer 8

请试试这个：

$('#btn_new').click(function(){
  $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

Answer 9

谢谢大家：它的工作。我的错误是我更改了按钮文本，当 span 在按钮内时，我的代码删除了 span 并在其上添加了新文本。我放了另一个跨度，现在它开始工作了。

我的html:

 <button id="btn_new"><span class="ui-icon ui-icon-plus"></span><span>new</span></button>

我的jquery:

$('#btn_new").click(function(){
   var caption=$(this).find('span:last').text();
   if(caption =='new'){
      $(this+'span:last').text('save');
      $(this+'span:first').toggleClass('ui-icon-plus ui-icon-tick');
   }
}

jquery 单击时更改 class 按钮内的跨度

jquery change class of a span inside a button on click

html

jquery

toggleclass