Javascript 如何在两个div（一个包含产品和其他选项）之间创建关系

我希望有人能为我提供以下问题的帮助。 我试图根据div的ID隐藏或显示在div中返回的项目。 更具体地说，我有一个部门，持有许多不同的产品。此外，还有另一个div，它拥有与特定产品相关的不同数量的可用选项。我的问题是，我不知道如何在这两者之间建立关系，这样，如果选择了特定的产品，则只有所选产品附带的选项才可见，而其他选项将隐藏

现在，重要的是要知道我有一个返回产品的函数，这个函数需要调整，但我不知道怎么做。我在互联网上寻找解决方案，但迄今为止没有成功。这就是功能：

//load product by click
      var $productItemsWrapper = $sidebarContent.find('.fpd-products .fpd-items-wrapper');
      $productItemsWrapper.append('<picture><span class="fpd-loading"></span><img src="'+views[0].thumbnail+'" title="'+views[0].title+'" style="display:none;" /></picture>')
      .children('picture:last').click(function(evt) {

        var $this = $(this),
          index = $productItemsWrapper.children('picture').index($this);

        thisClass.selectProduct(index);

        evt.preventDefault();

      }).data('views', views)
      .children('img').load(function() {
        $(this).fadeIn(500).prev('span').fadeOut(300, function() {
          $(this).remove();
        });
      });

      //show products in sidebar when there is more than 1
      if($productItemsWrapper.children('picture').length == 2) {
        $sidebarNavi.find('[data-target=".fpd-products"]').css('display', 'inline-block');
        _createScrollbar($productItemsWrapper);
      }

      $productItemsWrapper.perfectScrollbar('update');

    };

//通过单击加载产品
var$productItemsWrapper=$sidebarContent.find（'.fpd products.fpd items wrapper'）；
$productItemsWrapper.append（“”）
.children（'picture:last'）。单击（函数（evt）{
变量$this=$（this），
index=$productItemsRapper.children（'picture'）.index（$this）；
此类。选择产品（索引）；
evt.preventDefault（）；
}).data（'视图'，视图）
.children（'img'）.load（函数（）{
$（this）.fadeIn（500）.prev（'span'）.fadeOut（300，function（）{
$（this.remove（）；
});
});
//超过1个时在侧边栏中显示产品
if（$productItemsRapper.children（'picture'）。长度==2）{
$sidebarNavi.find（'[data target=“.fpd products”]'）.css（'display'，'inline block'）；
_createScrollbar（$productItemsWrapper）；
}
$productItemsWrapper.perfectScrollbar（'update'）；
};

以下是持有不同产品选项的div：

产品1的选项：

<div class="fpd-style" id="GCC67S"><img src="images/mizuno/gcc67s/web/web_base.png" data-parameters='{"x":220, "y": 229, "colors": "#dfd7c5,#000000,#ffffff,#990000"}' /></div>

产品2的选项：

<div class="fpd-style" id="test"><img src="images/mizuno/gcc67s/web/.png" data-parameters='{"x": 220, "y":229, "colors": "#dfd7c5,#000000,#ffffff,#990000"}' /></div>

请注意，我面临着被阻止在未来提问的风险，显然，由于提问时缺乏细节，所以我在这个问题上付出了努力。在给我打分之前，请站出来帮助我改进问题。我会给你你可能需要的任何细节。我试图尽可能的具体和详细，但是，也许我仍然没有提供一些重要的信息，或者我的措辞仍然不清楚

我将非常感谢任何提供的帮助

---

致以最诚挚的问候和干杯。

您可以使用数据属性将产品与可用选项关联起来。如

数据选项

此处：

<div id="products">
    <div class="product" data-opts="0,1,3">Product 0</div>
    <div class="product" data-opts="2,3">Product 1</div>
    <div class="product" data-opts="0,2">Product 2</div>
</div>
<div id="options">
    <div class="option">Option 0</div>
    <div class="option">Option 1</div>
    <div class="option">Option 2</div>
    <div class="option">Option 3</div>    
</div>

这不是基于您的html，但我认为您可以将此方法应用于它

---

工作。另一个是基于id的。

使用jQuery类在不同的时间隐藏和显示不同的选项。James，感谢您的回复！起初我尝试过，但由于我有动态链接，我不知道在这种情况下如何调用每个特定的类。我尝试过使用这段代码，但仍然没有执行war is expected$（'.fpd style'）.hide（）$（'img'）。单击（function（）{var target=“#”+$（this）.data（“target”）；$（“.fpd style”）.not（target.hide（）；$（target.show（）；}）；佐德，非常感谢你的建议。我现在要尝试应用它。“如果帮助解决你的问题，请考虑接受我的回答。”

$(".product").click(function productClick() {
    // make a number array from the data-opts, like [0,1,3]
    var opts = $(this).attr("data-opts").split(",").map(Number);
    $(".option").each(function optionEach(index) {
        // if index is in opts, show, otherwise hide
        $(this).toggle(opts.indexOf(index) > -1);
    });
});