Как добавить разные обработчики событий для внешних и внутренних элементов? - PullRequest
Новая
       11

Как добавить разные обработчики событий для внешних и внутренних элементов?

2 голосов
/ 31 января 2020

Я работаю над проектом для предстоящей выставки, и мне нужна ваша помощь с некоторыми сценариями. Я использовал jQuery для осуществления перехода по клику для изображений, и он работает очень хорошо.

Теперь я хочу реализовать какую-то галерею лайтбоксов, которая увеличивает изображения при втором щелчке по указанному c образ. После этого при нажатии в любом месте, кроме увеличенного изображения, галерея лайтбокса должна закрыться. Все, что я знаю, это то, что мне нужно еще одно событие onClick в jQuery ... но, честно говоря, я довольно растерян!

Я надеюсь, что кто-то может помочь мне здесь.

Это код, который я использую прямо сейчас: 

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>

1 Ответ

1 голос
/ 31 января 2020

Я не совсем уверен, но я только что попробовал, может быть, значение более или менее похоже на это.

Я изменяю ul.card на двойной щелчок, чтобы можно было нажимать и на изображение.

если вы используете второй способ, возможно, будет меньше кодирования, нет необходимости использовать функцию if ($ ('li.card'). css ('transform', 'scale (1)')) для javascript,

, но я не могу использовать второй способ, возможно, потому что это 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/

Надеюсь это полезно.

...