使用toggleClass僅切換一項/ div

Question

CODEPEN此處： https ：//codepen.io/shannon-creativeasset/pen/mvYPNp

當您單擊按鈕時，我正在嘗試獲得翻頁紙效果。 但是，當您嘗試翻轉一個框時，它會翻轉所有框。

有誰知道解決此問題的方法，但仍使用按鈕進行翻轉嗎？

$(document).ready(function() {

 var s_round = '.s_round';

 $(s_round).hover(function() {
  $('.b_round').toggleClass('b_round_hover');
  return false;
 });

 //$('.flip_box').click(function() {
   //$(this).toggleClass('flipped');
 //});

 $(s_round).click(function() {
   $('.flip_box').toggleClass('flipped');
   $('.s_round').addClass('s_round_click');
   $('.s_arrow').toggleClass('s_arrow_rotate');
   $('.b_round').toggleClass('b_round_back_hover');
   return false;
 });

 $(s_round).on('transitionend', function() {
  $(this).removeClass('s_round_click');
  $(this).addClass('s_round_back');
  return false;
 });
});

Answer 1

使用this parent和children ，您必須訪問clicked元素。

 $(document).ready(function() { var s_round = '.s_round'; $(s_round).hover(function() { $('.b_round').toggleClass('b_round_hover'); return false; }); //$('.flip_box').click(function() { //$(this).toggleClass('flipped'); //}); $(s_round).click(function() { $(this).parent().parent().children(".flip_box").toggleClass('flipped'); $(this).addClass('s_round_click'); $(this).children(".s_arrow").toggleClass('s_arrow_rotate'); $(this).parent().children(".s_round").toggleClass('b_round_back_hover'); return false; }); $(s_round).on('transitionend', function() { $(this).removeClass('s_round_click'); $(this).addClass('s_round_back'); return false; }); }); 

 * { margin: 0 auto; padding: 0; } *:focus { outline: none; } body { margin-top: 70px; background-color: #f4f4f4; font-family: 'Raleway', sans-serif; font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, p, a, span { color: #fff; letter-spacing: 0.02em; font-weight: 600; } h1, p, a { padding-left: 40px; } h1 { font-size: 2.5em; } p { font-size: 1.5em; line-height: 25px; } .b_button { border: 0; padding-bottom: 2px; } .container, .flip-box, .front, .back { width: 380px; height: 350px; } .container, .flip_box { position: relative; } .front, .back { position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .container { -moz-transform: perspective(1200px); -webkit-perspective: 1200px; perspective: 1200px; } .flip_box { transition: all 0.5s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .front { background: rgba(32,32,32,0.83) url(https://viewtecsigns.ca-staging.co.uk/wp-content/uploads/2019/02/Railway-Datum-Plate-viewtec-signs-railways-signs-nottingham.jpg); } .f_title { padding-top: 30px; } .f_subline { padding-top: 205px; color: #B1D4E8; } .f_headline { line-height: 23px; } .back { background-color: #D21849; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .b_headline { padding-top: 50px; } .b_text { font-size: 1.4em; line-height: 1.4em; padding-top: 10px; opacity: 0.85; } .b_button { position: absolute; left: 36px; bottom: 38px; width: 190px; height: 52px; background-color: #C30C3D; transition: all 0.3s; cursor: pointer; } .b_button:hover { background-color: #E30143; } .flipped { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .r_wrap { position: absolute; right: 40px; bottom: 38px; } .b_round, .s_round { position: absolute; right: 0px; bottom: 0px; width: 52px; height: 52px; background-color: #D21849; transition: all 0.2s linear; } .b_round { opacity: 0; background-color: #D21849; } .b_round_hover { transform: scale(1.37); opacity: 0.4; } .b_round_back_hover { background-color: #F60044; } .s_round_click { transform: scale(1.7); } .s_round_back { background-color: #C30C3D; } .s_arrow { width: 52px; height: 52px; background-image: url('https://viewtecsigns.ca-staging.co.uk/wp-content/uploads/2019/02/white-arrow-transparent-png-22.png'); background-size: 30px; background-repeat: no-repeat; background-position: center; background-color: transparent; transition: all 0.35s linear; } .s_arrow_click { transform: rotate(-180deg); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='container'> <div class='flip_box'> <div class='front'> <p class='f_title'>Signage Solutions</p> <p class='f_subline'>Lineside & Railway</p> <h1 class='f_headline' style="font-size: 20px;">Station Platform Signs</h1> </div> <div class='back'> <h1 class='b_headline'>Station Platform Signs</h1> <p class='b_text'>Traffic management is critical for safely<br> directing vehicles through roadworks on our<br> busy road and motorway network.<br> Viewtec are specialists in the manufacture<br> and supply of traffic management signs<br>covering the whole of the UK.</p> <button class='b_button'><span>Discover Solution</span></button> </div> </div> <div class='r_wrap'> <div class='b_round'></div> <div class='s_round'> <div class='s_arrow'></div> </div> </div> </div> <div class='container'> <div class='flip_box'> <div class='front'> <p class='f_title'>Signage Solutions</p> <p class='f_subline'>Lineside & Railway</p> <h1 class='f_headline' style="font-size: 20px;">Station Platform Signs</h1> </div> <div class='back'> <h1 class='b_headline'>Station Platform Signs</h1> <p class='b_text'>Traffic management is critical for safely<br> directing vehicles through roadworks on our<br> busy road and motorway network.<br> Viewtec are specialists in the manufacture<br> and supply of traffic management signs<br>covering the whole of the UK.</p> <button class='b_button'><span>Discover Solution</span></button> </div> </div> <div class='r_wrap'> <div class='b_round'></div> <div class='s_round'> <div class='s_arrow'></div> </div> </div> </div> 

Answer 2

那是因為你添加.click功能與類的所有元素s_round 。

您可以通過給他們一個單獨的類來解決此問題，或者更好地為他們分配一個ID。

例如，將s_round重命名為s_round1和s_round2並分別為它們創建一個函數。

解決此問題的最干凈方法是使用this （ https://html-tuts.com/jquery-this-selector/ ）。