jquery - 虽然检测到但未应用类

Question

这是代码 DEMO...该类替换一次，但是当单击新类时，旧类应该换回

例如，在页面加载时，home 类默认为 home1，然后当我单击 bye 时，bye 类更改为 bye1，但 home1 不会变回 home，尽管我有一行代码删除 home1 类并添加类(class)之家。

这是演示

html 是

<ul class=nav>
    <li class="home1"><a href="">HOME </a></li>
    <li class="bye"><a href="">BYE </a></li> 
</ul>

<script>

window.lastclickedclass="home1"; 
$("ul.nav li").click(function(e) 
{
    alert(lastclickedclass);   
    var updatedlastclass=lastclickedclass.slice(0,-1);

   var testclass=$(this).attr("class");

   var lastChar = testclass.substr(testclass.length - 1);

    if (lastChar=="1")
    {
      var newclass =  $(this).attr("class");
      var oldclass = testclass.slice(0,-1);       
    }
    else 
    {
    var newclass=$(this).attr("class")+"1";
    var oldclass=$(this).attr("class");
    }
    $(this).removeClass(oldclass);
    $(this).addClass(newclass);
      $(lastclickedclass).removeClass(lastclickedclass);  
       $(lastclickedclass).addClass(updatedlastclass);
lastclickedclass=$(this).attr("class");
    alert(lastclickedclass);   

 });

CSS 是

li.home1 {
    background: #678fef no-repeat;
    width:150px;
 height:65px;
     color:#fff;
    }

li.home{ 
 background: #666 no-repeat;
 width:150px;
 height:65px;
    color:#fff;
}

li.bye1 {
    background: #678fef no-repeat;
    width:150px;
 height:65px;
     color:#fff;
    }

li.bye{ 
 background: #666 no-repeat;
 width:150px;
 height:65px;
    color:#fff;
}

http://jsfiddle.net/ELbCx/20/

Answer 1

我认为你应该简化你的代码。无需记住以前的值等，只需遍历 li 元素，查看它们的当前类，并相应地进行更改。当您需要 2 个以上的元素时，这会让您省心。

我不太喜欢在类名上添加或删除“1”，但是嘿，我认为这段代码可以完成工作。

$("ul.nav li").click(function(e) 
{
    $("ul.nav li").each(function() {
        var curClass=$(this).attr("class");
        if (curClass.substr(curClass.length - 1) == "1") {
            var newClass = curClass.slice(0, -1);
        } else {
            var newClass = curClass + "1";
        }
        $(this).removeClass(curClass).addClass(newClass);
    });
});

http://jsfiddle.net/ELbCx/22/