Javascript 如何仅为相应的div隐藏div

我正在创建一个简单的选项卡，其中显示一些静态文本和一些动态创建的产品。因此，默认情况下，我显示所有产品。我想在总共五个标签中的标签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>

$（函数（）{
$（'.content:first child'）.show（）；
$（'.listThumbClick'）.live（'click'，函数（）{
var ind=$（'.listThumbClick'）.index（此）；
$（'.content'）.eq（ind.show（）.hide（）；
});
//生成的产品附加在选项卡内
$（'.product'）.appendTo（'.content'）；
});

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>

---

不确定这是否只是伪代码，但首先我不会使用“.”作为唯一的选择器。可能将其范围限定为具有id的元素

我还将缓存您的$（'.listThumbClick'）变量，这样您就不会每次单击都获取它

一种解决方案是向要隐藏产品的div添加数据属性

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

通过这样做，您还可以使隐藏/显示逻辑更加清晰，并且工作量更少

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

我很好奇你的最终目标是什么。是否需要只显示特定产品的选项卡？现在你将所有产品添加到所有选项卡，这很奇怪

---

看起来您真正想做的是只将某些产品附加到每个选项卡。

为什么要将所有

.product

元素附加到所有

.content

元素？您将有5个具有相同内容的选项卡。PS:

live

方法已被弃用，请改用

on

方法。@awbergs--我的最终目标是在不同的选项卡中显示不同的产品。我在所有选项卡中显示所有产品并试图隐藏不属于“指定”选项卡的产品的原因是1：产品是动态生成的，因此在它们出现之前我无法定义任何规则。所以基本上，我是通过写一篇文章来做这件事的

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