Question

我正在创建一个简单的标签，其中我显示了一些静态文本和几个动态创建的产品。所以默认我会展示所有产品。我希望隐藏一个产品，以防总共五个选项卡中的选项卡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>

Answer 1

不确定这只是伪代码，但首先我不会使用“。”作为你唯一的选择器。也许将其范围限定为具有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();
});

我很好奇你的最终目标是什么。您想要仅显示特定产品的标签吗？现在，您正在将所有产品添加到所有标签中，这很奇怪。

您真正想要做的只是在每个标签上附加某些产品。

如何仅为相应的div隐藏div

1 个答案: