javascript - 如何为外部和内部元素添加不同的事件处理程序？

Question

我正在为即将举行的展览做一个元素，需要您帮助编写一些脚本。我使用 jQuery 实现了图像的点击转换，效果非常好。

现在我想实现某种灯箱画廊，它可以在第二次单击特定图像时放大图像。然后，当单击放大图像以外的任何位置时，灯箱画廊应该关闭。我只知道我需要 jQuery 中的另一个 onClick 事件...但老实说我很迷失!

我希望有人可以帮助我。

这是我现在使用的代码:

jQuery(document).ready(function($){
  $('ul.cards').on('click', function(){
    $(this).toggleClass('transition');
  });
});

ul.cards{
  width: 1500px; margin: 0 auto 20px;
  height: 450px;
  list-style-type: none;
  position: relative;
  padding: 50px 0;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 300px; width: 250px;
    border-radius: 7.5px;
    position: absolute; left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 560px;
      }

      &.card-2{
        left: 280px;
      }
      
      &.card-3{
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
    <li class="title">
        <h2>Foncemagne, Étienne Lauréault</h2>
    </li>
    <li class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
    </li>
    <li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
    </li>
    <li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
    </li>
</ul>

Answer 1

我不太确定，但我只是尝试了一下，也许意思或多或少是这样的。

我将ul.card改为双击，这样图片也可以点击了。

如果使用第二种方式，可能会减少编码，不需要使用函数 if ($('li.card').css('transform', 'scale(1)')) 在 JavaScript 上，

但我不能使用第二种方式，也许是因为它是元素上的CSS .li 有一个转换属性。

jQuery(document).ready(function($){
  $('ul.cards').on('dblclick', function(){
    $(this).toggleClass('transition');
    $('li.card').css("transform","");
    /* $('li.card').removeClass('transformation'); -- second way*/
    $('li.card').off('click'); //delete the event listener click from li.card, so that when the collapsed cant be clicked
    if ($('ul.cards').hasClass('transition')){
      $('li.card').on('click', function(){
      
      /* $(this).toggleClass('transformation');
        -- second way */
      
      if ($('li.card').css('transform','scale(1)'))
      {
      	$(this).css('transform','scale(1.5)');
      } else {
      	$(this).css('transform','scale(1)');
      }
      });
    }
  });
  
});

$(document).mouseup(function (e) { // when clicked anywhere the image close/back to default scale
        if ($('ul.cards').hasClass('transition')){
            if ($(e.target).closest('li.card').length 
                        === 0) { 
                $('li.card').css('transform','scale(1)'); 
            }
        } 
        }); 
 

ul.cards{
  width: 1500px; margin: 0 auto 20px;
  height: 450px;
  list-style-type: none;
  position: relative;
  padding: 50px 0;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 300px; width: 250px;
    border-radius: 7.5px;
    position: absolute; left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{

      }
      p{

      }
    }
    
    /* &.transformation {
      transform: scale(1.5);
    }  -- second way */
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
    
  }

  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 560px;
      }

      &.card-2{
        left: 280px;
      }

      &.card-3{
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="cards" id="cardsParent">
    <li class="title">
        <h2>Foncemagne, Étienne Lauréault</h2>
    </li>
    <li id="card-1" class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
    </li>
    <li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
    </li>
    <li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
    </li>
</ul>

<div style="height:100px;background-color:grey;color:white;text-align:center;">
click here or anywhere for close/change to default image
</div>

你可以在这个链接中看到

https://jsfiddle.net/Lzp74drj/2/

我希望这有用。