-1

いくつかの静的テキストと動的に作成されたいくつかの製品を表示する単純なタブを作成しています。したがって、デフォルトではすべての製品を表示しています。全部で5つのタブのうち、タブ1、2、3の場合に1つの商品を非表示にしたい。これは、タブのスクリプトです。

何か案は？

<script>
    $(function(){
        $('.content:first-child').show();
            $('.listThumbClick').live('click', function(){
            var ind = $('.listThumbClick').index(this);
            $('.content').eq(ind).show().siblings().hide(); 
        });
        //generated product is attached inside the tab
        $('.product').appendTo('.content');
    });
</script>

そして、htmlはややこのようになります。注: 製品をタブ領域に追加しています

<div class="ppt">
    <div class="listThumbClick"></div>
    <div class="listThumbClick"></div>
    <div class="listThumbClick"></div>
    <div class="listThumbClick"></div>
    <div class="listThumbClick"></div>
</div>

<div class="tabContainer">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

<div class="product">
    <img src="product image source here" title="productOne"/>
</div>
<div class="product">
    <img src="product image source here" title="productTwo"/>
</div>
4

1 に答える 1

0

それが単なる擬似コードかどうかはわかりませんが、最初は「。」を使用しません。あなたの唯一のセレクターとして。たぶんそれをIDを持つ要素にスコープします。

また、$（'。listThumbClick'）変数をキャッシュして、クリックするたびにフェッチしないようにします。

1つの解決策は、製品を非表示にするdivにデータ属性を追加することです。

<div class="listThumbClick" data-hideproduct="true">

そしてあなたのハンドラーで

if($(this).data("hideproduct")){
    //hide the product
}
else {
    //show the product
}

これを行うことで、非表示/表示ロジックを少しすっきりさせ、作業を減らすこともできます。

var $listThumbClicks = $(".listThumbClick");
var $content = $(".content");
$listThumbClicks.live('click', function(){
    var ind = $listThumbClicks.index(this);
    $content.hide().eq(ind).show();
});

私はあなたの究極の目標が何であるか興味があります。特定の製品のみを表示するタブが必要ですか？現在、すべての製品をすべてのタブに追加していますが、これは奇妙なことです。

あなたが本当にやりたいと思われるのは、各タブに特定の製品のみを追加することです。

于 2013-03-19T19:34:12.507 に答える