只在當前div觸發事件

我有多個帶有“資訊”按鈕的框，每個框都可以切換帶有描述的模態，但是當我單擊一個按鈕時，它會同時觸發所有模態，而不是僅顯示當前框中的模態。任何人都可以幫我弄清楚嗎？

這是我的代碼：

$('.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>

uj5u.com熱心網友回復：

導航到 .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>

uj5u.com熱心網友回復：

使用 選擇nextElementSibling當前目標的e.currentTarget.nextElementSibling并使用切換類$(e.currentTarget.nextElementSibling).toggleClass('open');。但這僅在.modal按鈕旁邊出現時才有效（我已將其放入解決方案中）

或者

選擇父級modal并使用jQueySelector 查找具有相同類的子級將是$(this).parent().children('.modal').toggleClass('open');這將選擇具有modal相同父級 div 下的類的元素。

$('.info-btn').click(function (e) {
  // $(e.currentTarget.nextElementSibling).toggleClass('open');
  $(this).parent().children('.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>

通用解決方案。

• 找到與父類名稱最近的元素。
• 查找具有目標類名的子元素。
• 切換其可見性

作業小提琴

$('.info-btn').click(function (e) {
  $(this).closest('.box').children('.modal').toggleClass('open');
});

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

.modal, .modal1 {
  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">
  Im a simple div
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>

<div class="box">
  Im contained inside another parent
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>


<div class="box">
  I have a dive between `.modal` and `info-btn`
  <button class="info-btn">More info</button>
  <div class="modal1">modal 3</div>
  <div class="modal">modal 3</div>
</div>

標籤：查询

上一篇：在javascript，jquery中每2個專案回圈淡入和淡出

下一篇：如何計算一個類別和作者的帖子數量