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

我试图在我的个人网站上创造一种体验，允许用户点击我作品的英雄形象，并观看作品上方打开的div，以查看更深入的信息

下面是一个JSFIDLE：

我已尝试使用以下命令将info 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（）位置的匹配

但这似乎根本不起作用。我想我可以在每一个上设置特定的匹配类，但我正试图使其尽可能模块化。我现在正在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>

X
斯皮夫利
前端工程师
Spiffly是一个好的市场。B2P交易的场所——即从企业到消费者——交易。消费者以批发价格购买产品，这就降低了尝试新产品的风险，并使他们有动力在产品好的情况下推广产品。企业仍在赚钱，但从消费者的社会存在中获得营销。




尽管我以前从未使用过Swig、Node.js或Sass，但我还是在不到100小时的时间内构建了电子商务网站Spiffly.is的前端。

---

也许这段代码会对您有所帮助。

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

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

---

你能提供一把JSFIDLE吗？@mic4ael这里有一把小提琴。。。我自己也更新了帖子，看看我的答案。很好，我从来没有想到过这样的事情，这么简单的匹配方法！使用data属性绑定是编写可维护代码的一种非常好的方法，因为您可以使用name来引用操作或事件类型，关于这一点，有一篇很好的逐站点文章-我同意您的看法，我必须阅读这篇文章，但我的长期目标是让Node.js在用户导航时将数据延迟加载到模板。我希望匹配基于每个数据对象的uuid，而不是必须硬编码每个订单点。但我同意数据属性是关键！这太棒了！一旦我从数据中得到一些uuid，我就可以完全实现这个超级模块化！我假设index，obj参数只可用，因为这是一个.each（）循环？还是错了@mic4ael@realjoet，是的，确切地说，

索引

和

数据

是传递给回调函数的参数，回调函数将馈送给

每个

方法。

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

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

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

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