求实现方法··

Question

有若干个<a></a>标签都有各自的样式如
<a class='aaa'>aaaa</a>
<a class='bbb'>bbbb</a>
<a class='ccc'>cccc</a>
<a class='ddd'>dddd</a>
....
点击aaaa 样式就更改class='zzz',再点击bbbb, aaaa的样式恢复为原来的class='aaa'，而bbbb样式变为class='zzz'。 同理 ，点击任何一个a标签样式都变为class='zzz', 其他标签恢复为各自原来的样式。
请教大家用 js 如何实现 谢谢！ 

Answer 1

方法1：
var lastItem = {
  object: '',
  class: ''
};$('a').click(function() {
  if (lastItem.object) {
    lastItem.object.attr('class', lastItem.class);
  }
  lastItem.object = $(this);
  lastItem.class = $(this).attr('class');
  //设置当前点击的class
  $(this).attr('class', 'zzz');
  
});方法2：
先改HTML结构,因为需要记住之前的选择：
<a class='aaa' originClass="aaa">aaaa</a>
<a class='bbb' originClass="bbb">bbbb</a>
<a class='ccc' originClass="bbb">cccc</a>
<a class='ddd' originClass="ccc">dddd</a>
JS代码：
$('a').click(function() {
  //把其它的class还原
  $('a').each(function() {
    $(this).attr('class', $(this).attr('originClass'));
  });
  //设置当前点击的class
  $(this).attr('class', 'zzz');
});

Answer 2

两种方法都不可取：
1、只考虑按顺序点击，还没考虑如果我在aaa身上不断点的情况，class早就没了。
2、添加不规范的属性，是很好解决问题，但html不是很乐意。<script src="http://code.jquery.com/jquery-latest.js"></script>
<a class='aaa'>aaaa</a>
<a class='bbb'>bbbb</a>
<a class='ccc'>cccc</a>
<a class='ddd'>dddd</a>
<script>
    $(function(){
        var cls=[],i=-1;
        $("a").each(function(i,item){
            cls[i]=$(this).attr("class");
        });
        $("a").click(function(){
            if(i>=0)$("a:eq("+i+")").attr("class",cls[i]);
            i=$(this).index()-1;
            $(this).attr("class","zzz");
        });
    });
</script>

Answer 3

<style type="text/css">
.aaa{color:#FF0000}
.bbb{color:#00FF00}
.ccc{color:#0000FF}
.zzz{color:#FF00FF}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
$(function(){
$("a").click(function(){
$("a").removeClass("zzz");
$(this).addClass("zzz");
})
})
</script>
<a class="aaa">aaaa</a>
<a class="bbb">bbbb</a>
<a class="ccc">cccc</a>

Answer 4

作为前端的就应该从这思路上想问题，改变选中样式应该是添加多一个class,而不是直接替换。这样写class也方便。
$("a").removeClass("zzz");==》$("a.zzz").removeClass("zzz");

Answer 5

请你再仔细读一下方法1的代码，你连续点击aaaa试试看看是否工作，每次不管点击谁都会把上一次的恢复，然后记录下当前元素的class，所以class不会丢失，不过连续点击同一个元素性能是稍微差了一些，改进代码如下：var lastItem = {
  object: '',
  class: ''
};$('a').click(function() {
  if ($(this).attr('class') === 'zzz') {
    return;
  }
  if (lastItem.object) {
    lastItem.object.attr('class', lastItem.class);
  }
  lastItem.object = $(this);
  lastItem.class = $(this).attr('class');console.log(this);console.log($(this));console.log(this.getAttribute('class'));
  //设置当前点击的class
  $(this).attr('class', 'zzz');