如何為外部和內部元素添加不同的事件處理程序？

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雙擊，這樣圖片也可以點擊了。

如果您使用第二種方式，那么編碼可能會更少，無需在 javascript 上使用if ($ ('li.card'). css ('transform', 'scale (1)'))函數，

但我不能使用第二種方式，也許是因為它是元素.li上的 css 有一個轉換屬性。

 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/

我希望這是有用的。