jquery - 使用切换更改单个 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');
});