jquery - 仅在当前 div 中触发事件

Question

我有多个带有“信息”按钮的框，每个框都可以切换带有描述的模式，但是当我单击一个按钮时，它会同时触发所有模式，而不是仅显示当前框中的模式。任何人都可以帮我弄清楚吗？

这是我的代码：

$('.info-btn').click(function () {
  $('.modal').toggleClass('open');
});

.box{ color:#341f12; background-color: #EFEFEF;  padding:20px;  margin:20px }
.modal{opacity:0}
.open{opacity:1 !important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
Josh...
<button class="info-btn">More info</button>
<div class="modal">modal 1</div>
</div>

<div class="box">
Luca...
<button class="info-btn">More info</button>
<div class="modal">modal 2</div>
</div>


<div class="box">
Kevin...
<button class="info-btn">More info</button>
<div class="modal">modal 3</div>
</div>

标签： jquery

Answer 1

导航到 .next()

如果您想移动模态，另一种选择：

$(this).closest('.box').find('.modal').toggleClass('open');

$('.info-btn').on('click', function() {
  $(this).next('.modal').toggleClass('open');
});

.box {
  color: #341f12;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 20px
}

.modal {
  opacity: 0
}

.open {
  opacity: 1 !important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  Josh...
  <button class="info-btn">More info</button>
  <div class="modal">modal 1</div>
</div>

<div class="box">
  Luca...
  <button class="info-btn">More info</button>
  <div class="modal">modal 2</div>
</div>


<div class="box">
  Kevin...
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>

没有 jQuery

document.getElementById('container').addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains('info-btn')) {
    tgt.closest('.box').querySelector('.modal').classList.toggle('open');
  }
});

.box {
  color: #341f12;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 20px
}

.modal {
  opacity: 0
}

.open {
  opacity: 1 !important
}

<div id="container">
  <div class="box">
    Josh...
    <button class="info-btn">More info</button>
    <div class="modal">modal 1</div>
  </div>

  <div class="box">
    Luca...
    <button class="info-btn">More info</button>
    <div class="modal">modal 2</div>
  </div>


  <div class="box">
    Kevin...
    <button class="info-btn">More info</button>
    <div class="modal">modal 3</div>
  </div>
</div>