javascript - 如何在两个 div 之间建立关系，一个包含产品和其他选项

Question

我希望有人能够为我提供以下问题的帮助。 我试图根据 div 的 ID 隐藏或显示 div 中返回的元素。 更具体地说，我有一个包含许多不同产品的 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');

    };

以下是包含不同产品选项的 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>

请注意，由于在提问时缺乏具体细节，我显然有可能在未来被阻止提问，因此，我在这个问题上付出了努力。在让我失望之前，请站出来帮助我改进问题。我会给你任何你可能需要的细节。我已尝试尽可能具体和详细，但也许我仍然没有提供一些关键信息，或者我的措辞仍然不清楚。

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

致以最诚挚的问候和欢呼。

Answer 1

您可以使用数据属性将产品与可用选项相关联。喜欢这里的data-opts:

<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>

点击后，您可以显示此处指定的选项，并隐藏其他选项。

$(".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);
    });
});

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

工作 jsfiddle demo .另一个基于 id 的 jsfiddle .