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

Question

我正在为一个即将到来的展览项目工作，需要你的一些脚本的帮助。我使用jQuery实现了图像点击时的过渡，它工作得非常好。

现在，我想实现某种类型的lightbox图库，它可以在第二次单击特定图像时放大图像。之后，当单击除放大图像以外的任何位置时，lightbox图库应该会关闭。我只知道我需要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更改为双击，这样也可以单击图像。

如果你使用第二种方法，可能会有更少的编码，不需要在javascript上使用函数if ($ ('li.card'). css ('transform', 'scale (1)'))，

但我不能使用第二种方法，可能是因为它的css在元素.li上有一个transform属性。

​

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/

我希望这是有用的。