javascript - 如何使用 jQuery 更改子 DIV 的类？

Question

我有以下内容：

<li>
   <a id="show">
      <div class="sprite-blank" ></div></a></li>

如何使用 jQuery 将其更改为：

<li>
   <a id="show">
      <div class="sprite-balloon" ></div></a></li>

Answer 1

$('li a#show div').removeClass('sprite-blank').addClass('sprite-balloon');

你也可以使用toogleClass()：

$('li a#show div').toggleClass('sprite-blank sprite-balloon');

Answer 2

$('.sprite-blank').toggleClass('sprite-blank sprite-balloon');

这将改变页面上的所有可用.sprite-blank元素，如果您需要更具体，只需更改初始选择器，例如

$('a > .sprite-blank').toggleClass('sprite-blank sprite-balloon');

Answer 3

只需这样做：

$(".sprite-blank").removeClass("sprite-blank").addClass("sprite-balloon");

Answer 4

我认为你需要这样的东西：

http://jsfiddle.net/yUaZe/

HTML

<li>
   <a class="show" href="#">Show
     <div class="sprite sprite-hide" >Test</div>
    </a>
</li>
<li>
   <a class="show" href="#">Show
     <div class="sprite sprite-hide" >Ha</div>
    </a>
</li>

CSS

.sprite-balloon {
    display:block;
}
.sprite-hide {
 display:none;   
}
​

JS

$('.show').click(
    function(event) {
    var that=$(this);
    event.preventDefault();
    that.find('.sprite').toggleClass('sprite-balloon');
    that.find('.sprite').toggleClass('sprite-hide');
    console.log(that);
    }
    );​