-1

我正在创建一个简单的选项卡，其中显示了一些静态文本和一些动态创建的产品。所以默认情况下我会展示所有的产品。我想在总共五个标签中的标签 1、2、3 的情况下隐藏一个产品。这是选项卡的脚本。

有任何想法吗？

<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') 变量，这样您就不会在每次点击时都获取它。

一种解决方案是将数据属性添加到要隐藏产品的 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 回答