Question

这里是代码DEMO ...该类替换一次，但是当点击新类时，oldone应该交换回来

例如，在home的页面加载类是home1默认然后当我点击再见然后再见类改为bye1但home1不会改回到home虽然我有一行代码删除类home1并添加上课。

这是演示

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

尝试

$("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;
});

演示：Fiddle

另一个版本

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)
        });
    }
});

演示：Fiddle

Answer 2

我认为你应该简化你的代码。不是记住先前的值等，而是循环遍历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/

Answer 3

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

这个区块：

 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();来阻止锚标记的默认点击操作。

虽然检测到类没有被应用

3 个答案: