使用切换更改单个 Div 中的图像？

Question

想要尝试通过三个独立链接上的切换来控制该精灵的状态。我有三个单独的链接，我想我可以单击其中的任何链接来将其中一个链接切换为一或关闭。目标是更改 #case 图像的状态。

我想我可以使用 addClass，但我不知道如何删除之前放在那里的任何类。假设它是一些变量，对吧？

 $("li.ti-color a").click(function(){
      $("#logo-link").toggleClass('red');

      });

  $("li.black-pvd a").click(function(){
      $("#logo-link").toggleClass('blue');


  });

  $("li.white-color a").click(function(){
      $("#logo-link").toggleClass('white');


  });

<div id="case">

    <a href="#" id="logo-link"></a>

</div>


<ul id="links"></li>
    <li class="black-pvd"><a href="#">Black PVD</a></li>
    <li class="ti-color"><a href="#">Titanium</a></li>
    <li class="white-color"><a href="#">White</a></li>

</ul>   

提前致谢。

Answer 1

RemoveClass() 有效： http://api.jquery.com/removeClass/

$("li.ti-color a").click(function(){
  $('#logo-link').removeClass('blue white').addClass('red');
});

$("li.black-pvd a").click(function(){
  $('#logo-link').removeClass('red white').addClass('blue');
});

$("li.white-color a").click(function(){
  $('#logo-link').removeClass('red blue').addClass('white');
});

或者如果你想将所有现有类替换为另一个类，我们可以使用 .attr('class', 'white')。喜欢：

$("li.ti-color a").click(function(){
  $('#logo-link').attr('class', 'red');
});

$("li.black-pvd a").click(function(){
  $('#logo-link').attr('class', 'blue');
});

$("li.white-color a").click(function(){
  $('#logo-link').attr('class', 'white');
});