0

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

例如，在页面加载默认情况下，home 类是 home1，然后当我单击 bye 时，bye 类会更改为 bye1，但 home1 不会变回 home，尽管我有一行代码删除了 home1 类并将 home 类添加到它。

这是演示

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/

4

3 回答 3

0

尝试

$("ul.nav li").click(function(e) {
    var $this = $(this), clazz = $this.attr("class"), newclass, oldclass;

    var type = clazz.substr(clazz.length - 1);

    if (type == "1") {
        newclass = clazz;
        oldclass = clazz.slice(0,-1);       
    } else {
        newclass = clazz + "1";
        oldclass = clazz;
    }

    $this.removeClass(oldclass).addClass(newclass);

    $this.siblings('[class$="1"]').attr('class', function(idx, clazz){
        return clazz.substring(0, clazz.length - 1)
    });

    return false;
});

演示：小提琴

另一个版本

var regex = /1$/
$("ul.nav li").on('click', function(e) {
    var $this = $(this), clazz = $this.attr("class");

    e.preventDefault();

    if(!regex.test(clazz)){
        $this.removeClass(clazz).addClass(clazz + 1);
        $this.siblings('[class$="1"]').attr('class', function(idx, clazz){
            return clazz.substring(0, clazz.length - 1)
        });
    }
});

演示：小提琴

于 2013-07-27T15:22:23.997 回答
0

我认为你应该简化你的代码。无需记住以前的值等，只需遍历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/

于 2013-07-27T15:23:52.300 回答
0

您的脚本中有一个小的逻辑错误。

这个块：

 if (lastChar=="1") {
      var newclass =  $(this).attr("class");
      var oldclass = testclass.slice(0,-1);       
 }

应该是相反的：

if (lastChar=="1"){
      var oldclass =  $(this).attr("class");
      var newclass = testclass.slice(0,-1);       
 }

还可以e.preventDefault();在您的点击事件中使用，以防止锚标记的默认点击操作。

于 2013-07-27T15:26:23.157 回答