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。另一个是基于身份的jsfiddle。

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

1 个答案: