尝试根据与按钮顺序的匹配来打开div [ordered]（类似于手风琴）

Question

我正在尝试在我的个人网站上创建一种体验，允许用户单击我的作品的英雄图片并观看作品上方的div打开，以便查看更多的深入信息。

这是一个jsFiddle： https ://jsfiddle.net/1zs7zomo/

我试着使用匹配匹配信息div的顺序与按钮的顺序

$(function() {
  var hero = $('.display-section__content-hero');
  var treasure = $('.treasure-container');
  var closeButton = $('.close-button');

  treasure.hide();

  hero.click(function() {
    var el = $(this);
    var elData = el.data('order');
    var treasureData = treasure.data('order');

    treasure.each(function(){
      if (treasureData === elData) {
        console.log(treasureData + " = " + elData);
        $(this).slideDown(600);
      }
    });

  })

  closeButton.click(function() {
    $(this).closest('.treasure-container').slideUp(600);
  })
})

但是，当打开info div时，它会打开所有它们而不是匹配的一个。

我也尝试根据.eq（）位置进行匹配

$(function() {
  var hero = $('.display-section__content-hero');
  var treasure = $('.treasure-container');
  var closeButton = $('.close-button');

  treasure.hide();

  hero.click(function() {
    var el = $(this);
    var elOrder = el.eq();

    treasure.eq(elOrder).slideDown(600);
  })

  closeButton.click(function() {
    $(this).closest('.treasure-container').slideUp(600);
  })
})

但这似乎根本不起作用。 我以为可以在每个类上放置特定的匹配类，但是我正在尝试使其尽可能模块化。 我现在正在Node.js上进行构建，以学习并希望使它成为超级模块化，这样一来，当我弄清楚如何通过ajax加载数据时，我就可以让它们做出反应而不必使用任何形式的顺序或类，纯粹是数据。

这是基本级别的HTML。如果需要，可以提供更多内容

<div class="display-section--build clearfix">
  <div class="treasure-container" data-order="1">
    <div class="treasure-hero">
      <div class="close-button">X</div>
    </div>
    <div class="treasure-description-container">
      <div class="description-head">
        <h1 class="treasure-description__title">Spiffly.is</h1>
        <a class="treasure-description__link" href="http://spiffly.is" target="_blank">Visit Site</a>
      </div>
      <h2 class="treasure-description__role">Front-End Engineer</h2>
      <p class="treasure-description__details">Spiffly is a marketplace for good. A place for B2P -- that's business to prosumer -- transactions. Prosumers get products at wholesale cost, which takes the risk out of trying something new and gives them motivation to promote the product if it's good. Businesses still make money but get marketing from prosumers' social presence. 
      <br>
      <br>
      I built the front-end of Spiffly.is, an e-commerce site, in less than 100 hours despite never having worked with Swig, Node.js or Sass before.
      </p>
    </div>
  </div>
  <div class="display-section__content-hero" data-order="1"></div>
</div>

Answer 1

treasure.each(function(index, obj){
    if ($(obj).data('order') === elData) {

也许该片段将对您有所帮助。

Answer 2

您应该使用数据属性来索引需要定位的框

<div class="click_me_to_open" data-order="1"></div>
<div class="hidden_div" data-order-details="1"></div>

这样，在您的JS中，您可以将click绑定到.click_me_to_open获取data-order的值，并通过选择器定位到正确的框

$('.click_me_to_open').on('click', function () {
      var target = $(this).data('order');

      $('[data-order-details="' + target + '"]').slideDown();
  })