0

これがコードのデモです...クラスは一度置き換えられますが、新しいクラスがクリックされると、古いクラスが元に戻るはずです

たとえば、ホームのページロードクラスはデフォルトでホーム1であり、さようならをクリックすると、さようならのクラスはbye1に変更されますが、ホーム1はホームに戻りませんが、クラス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 に答える