如何在同一页面上获取多个模态才能工作

Question

我正在尝试让多个模态在同一页面上工作，但我遇到了一些麻烦。

基本上，我想知道的是，为什么这样做：

<ul class="list">
  <li class="item">
    1
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      one
    </div>
  </li>
  <li class="item">
    2
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      two
    </div>
  </li>
  <li class="item">
    3
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      three
    </div>
  </li>
</ul>

-

var open = document.querySelectorAll( '.open' );

for ( y=0; y<open.length; y++ ) {
    open[y].addEventListener( 'click', function() {

        var modal = this.parentNode.querySelector( '.modal' );
        modal.classList.remove( 'hide' );
    });
}


var close = document.querySelectorAll( '.close' );

for ( x=0; x<close.length; x++ ) {
    close[x].addEventListener( 'click', function() {
        this.parentNode.classList.add( 'hide' );
    });
}

但这并不是：
（注意缺少button.open，现在＆＃34;打开＆＃34;事件绑定到li.item ...打开仍然有效，但是关闭没有）

<ul class="list">
  <li class="item">
    1
    <div class="modal hide">
      <button class="close">close</button>
      one
    </div>
  </li>
  <li class="item">
    2
    <div class="modal hide">
      <button class="close">close</button>
      two
    </div>
  </li>
  <li class="item">
    3
    <div class="modal hide">
      <button class="close">close</button>
      three
    </div>
  </li>
</ul>

-

var item = document.querySelectorAll( '.item' );

for ( i=0; i<item.length; i++ ) {
    item[i].addEventListener( 'click', function() {

        var modal = this.querySelector( '.modal' );
        modal.classList.remove( 'hide' );
    });
}

var close = document.querySelectorAll( '.close' );

for ( x=0; x<close.length; x++ ) {
    close[x].addEventListener( 'click', function() {
        this.parentNode.classList.add( 'hide' );
    });
}

Answer 1

＆＃13;

＆＃13;

var item = document.querySelectorAll( 'li' );

for ( i=0; i<item.length; i++ ) {
    item[i].addEventListener( 'click', function() { 
      // this.parent will give li and then find modal
      var modal = this.querySelector('.modal')
      modal.classList.remove("hide");
    });
}

var close = document.querySelectorAll( '.close' );

for ( x=0; x<close.length; x++ ) {
    close[x].addEventListener( 'click', function(e) {
      // this.parentNode will give directly modal
      
      var modal = this.parentNode
      modal.classList.add("hide");
      // Stop child to parent bubbling
      e.stopPropagation();
    });
}

＆＃13;

.hide{
   display: none;
}

li{
cursor: pointer;
}

＆＃13;

<ul class="list">
  <li class="item">
    1(click to open)
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      one
    </div>
  </li>
  <li class="item">
    2(click to open)
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      two
    </div>
  </li>
  <li class="item">
    3(click to open)
    <button class="open">open</button>
    <div class="modal hide">
      <button class="close">close</button>
      three
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;