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的另一类并将其用作变量，但是我真的无法设法找到一种正确执行此方法的方法。我已经设法通过数组来完成此操作，但实际上并不能在更大范围内使用，因为我必须在变量-https://jsfiddle.net/pumfya9r/10/

中插入每个.btn

我觉得我已经接近了，所以会有所帮助。

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>

制作动态/遮罩变量？

1 个答案: