0

商品リスト テンプレートの ID を切り替えようとしています (クラスの方がよいことはわかっていますが、この場合は ID を使用する必要があります)。残念ながら、最初のクリックでしか機能しません。完了したら元に戻すことができません。私は何を間違っていますか？

これが私が使用しているコードです

$(document).ready(function(){

    $("a.toggle").bind("click", function(e){
        e.preventDefault();

        var theid = $(this).attr("id");
        var thecontainer = $("div#container");

    if($(this).hasClass("active")) { 
        return false;
    } else {

        if(theid == "gridView") {
           $(this).addClass("active");
           $("#listView").removeClass("active");

        thecontainer.removeAttr('id');
        thecontainer.attr('id', 'container');
        }
        else if(theid == "listView") {
            $(this).addClass("active");
            $("#gridView").removeClass("active");

            thecontainer.removeAttr('id');
            thecontainer.attr('id', 'containerList');

            } 
        }

    });
});

ビューを切り替えるために使用しているリンクの html を次に示します。

  <div class="buttonPanel">
    <a id="gridView" class="btnGridView toggle active" href="#">Grid</a> 
    <a id="listView" class="btnListView toggle" href="#">List</a>   
  </div>

CSS はかなり長いですが、要するに、ボックスと関数を含むグリッド ビューとストレート リスト ビューの 2 つのバージョンがあります。

4

1 に答える 1

0

この行を document.ready: $("div#container").addClass("containerClass"); NOT 内のクリック イベントに追加します。

次に交換var thecontainer = $("div#container");

とvar thecontainer = $(".containerClass");

于 2012-10-05T21:52:03.623 に答える