javascript - 做一个动态/掩码变量？

Question

所以我有这个基本结构:

<div class="level level1">
  <div class="btn foo"></div>
  <div class="btn bar"></div>
</div>

<div class="level level2 foo-wrapper">
  <div class="btn foo-lma"></div>
  <div class="btn foo-orb"></div>
</div>

<div class="level level3 foo-lma-wrapper">
  <div>Content</div>
</div>

有没有一种方法可以通过用掩码声明某种类型的变量来做到这一点:

如果我点击 .foo -> 显示 .foo-wrapper。

如果我然后单击 .foo-lma -> .foo-lma-wrapper 是否显示？

类似于:

var goDeeper;

$('.btn').click(function() {

  if ( $(this).hasClass(goDeeper) ) {
    $('.level.'+goDeeper+'-wrapper').fadeIn();
  }

});

我想我必须以某种方式找到另一类 .btn 并将其用作变量，但我无法真正设法找到正确执行此操作的方法。我已经设法用一个数组来做到这一点，但它确实不能在更大的范围内工作，因为我必须在变量中插入每个 .btn - https://jsfiddle.net/pumfya9r/10/

我觉得我很亲近，所以我们将不胜感激。

Answer 1

看起来很简单 - 单击时，选择类列表中的第二个类名，然后显示 div匹配.<lastClassName>-wrapper .这取决于第二个类名始终是目标 -wrapper你想找到，但不需要任何 goDeeper变量或 level# - 类:

$('.btn').click(function() {
  const selector = `.${$(this)[0].classList[1]}-wrapper`;
  $(selector).fadeIn();
});

.level { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn first">show first div</div>
<div class="level first-wrapper">
  <div class="btn foo">show foo</div>
  <div class="btn bar"></div>
</div>

<div class="level foo-wrapper">
  <div class="btn foo-lma">show lma</div>
  <div class="btn foo-orb">show orb (doesn't exist)</div>
</div>

<div class="level foo-lma-wrapper">
  <div>Content</div>
</div>