zQuery reordering을위한 jQuery toggleClass는 한 번만 작동합니다.

클릭 한 비디오와 관련된 텍스트의 div로 비디오를 클릭하면 jQuery 함수로 바뀝니다. 스왑 효과를 얻으려면 클릭 한 비디오 div에 -10 Z- 인덱스가있는 CSS 클래스를 적용하고 싶습니다. ToggleClass는 한 번 작동하며 뒤로 전환하지 않습니다 (예 : 동영상 div를 텍스트 앞에 놓습니다).zQuery reordering을위한 jQuery toggleClass는 한 번만 작동합니다.

HTML

<!DOCTYPE html> 
    <html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div class = "container"> 
     <div id="box1" class = "box"> 
       <div id="text1" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut suscipit magna, ac imperdiet diam. Pellentesque quis tellus et nisi luctus efficitur vitae in quam. In maximus aliquam dui sed vulputate. Duis sed urna in ipsum efficitur ultricies at sit amet ligula. Curabitur feugiat placerat velit a mollis. Phasellus ac mollis metus. Pellentesque condimentum urna eu ex vulputate semper. Fusce pulvinar, dui id convallis aliquam, elit lectus convallis tellus, sit amet semper lectus nisl vehicula enim. Curabitur est augue, pharetra non orci vitae, rutrum fermentum nunc. Curabitur a tempor elit, et fermentum erat. Etiam iaculis nulla vitae nisl pretium venenatis. Maecenas convallis placerat vestibulum. Duis vel interdum quam. Nunc ultricies elit ut dolor bibendum commodo. Nam mollis diam tellus, non imperdiet purus facilisis in.Aliquam vitae malesuada lacus, a eleifend justo. Mauris in condimentum nisi, vel pulvinar magna. Suspendisse nibh augue, scelerisque in suscipit id, interdum sed arcu. Cras semper varius ante. Integer mollis, tellus quis interdum porttitor, ipsum dui venenatis elit, ut luctus magna est eu ex. Praesent pretium purus nisi. Duis pharetra aliquet diam, sed tincidunt enim. Mauris nunc sapien, mattis sed tincidunt sed, bibendum id eros. Pellentesque velit arcu, viverra id ipsum vel, venenatis hendrerit purus. Ut auctor quis ligula non laoreet. Proin id porta sapien. Nunc et felis id augue ultricies sollicitudin eget pellentesque justo. Etiam magna neque, tincidunt a quam in, varius suscipit quam. Cras tincidunt feugiat ex sit amet interdum. Aliquam sagittis turpis eu pulvinar convallis. Donec imperdiet euismod nisl et faucibus.</div> 
       <div id="video1" class="video"> <video loop muted><source src=assets/IMG_1353.MOV></video></div> 
     </div> 
    <div id = "box2" class="box"> 
       <div id="text2" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut suscipit magna, ac imperdiet diam. Pellentesque quis tellus et nisi luctus efficitur vitae in quam. In maximus aliquam dui sed vulputate. Duis sed urna in ipsum efficitur ultricies at sit amet ligula. Curabitur feugiat placerat velit a mollis. Phasellus ac mollis metus. Pellentesque condimentum urna eu ex vulputate semper. Fusce pulvinar, dui id convallis aliquam, elit lectus convallis tellus, sit amet semper lectus nisl vehicula enim. Curabitur est augue, pharetra non orci vitae, rutrum fermentum nunc. Curabitur a tempor elit, et fermentum erat. Etiam iaculis nulla vitae nisl pretium venenatis. Maecenas convallis placerat vestibulum. Duis vel interdum quam. Nunc ultricies elit ut dolor bibendum commodo. Nam mollis diam tellus, non imperdiet purus facilisis in.Aliquam vitae malesuada lacus, a eleifend justo. Mauris in condimentum nisi, vel pulvinar magna. Suspendisse nibh augue, scelerisque in suscipit id, interdum sed arcu. Cras semper varius ante. Integer mollis, tellus quis interdum porttitor, ipsum dui venenatis elit, ut luctus magna est eu ex. Praesent pretium purus nisi. Duis pharetra aliquet diam, sed tincidunt enim. Mauris nunc sapien, mattis sed tincidunt sed, bibendum id eros. Pellentesque velit arcu, viverra id ipsum vel, venenatis hendrerit purus. Ut auctor quis ligula non laoreet. Proin id porta sapien. Nunc et felis id augue ultricies sollicitudin eget pellentesque justo. Etiam magna neque, tincidunt a quam in, varius suscipit quam. Cras tincidunt feugiat ex sit amet interdum. Aliquam sagittis turpis eu pulvinar convallis. Donec imperdiet euismod nisl et faucibus.</div> 
       <div id="video2" class="video" > <video loop muted><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/></video></div> 
    </div> 
    </div> 
    </body> 
    <script> 
    $(document).ready(function(){ 
     $(".box").find(".video").click(function() { 
      $(this).toggleClass("toggle"); 
     }); 
    }); 
    </script> 
    <script> 
    $(document).ready(function() { 
     $(".video").hover(function() { 
      $(this).children("video")[0].play(); 
     }, function() { 
      var el = $(this).children("video")[0]; 
      el.pause(); 
     }); 
    }); 
    </script> 
    </html>

CSS

.container { 
    margin: 10%; 
} 

.box { 
    background-color: blue; 
} 

#box1 { 
    border: dotted; 
    width: 700px; 
    height: 700px; 
} 

#box2 { 
    border: dotted; 
    width: 700px; 
    height: 700px; 
} 

.toggle { 
    z-index: -10; 
} 

.text { 
    font-size: large; 
    width: 700px; 
    position: absolute; 
    z-index: 0; 
} 

.video { 
    position: absolute; 
} 

video { 
    width: 700px; 
}

출처

2017-09-03 jehm

.video에서 해당 클릭 이벤트에 console.log (somethingsomething)를 추가하면 video1을 두 번째 클릭한다고 생각할 때 text1을 클릭했을 수 있습니다. – deg

$(document).ready(function(){ 
    $(".box").find(".video").click(function() { 
     $(this).toggleClass("toggle"); 
    }); 
    $(".box").find(".text").click(function() { 
     $(this).siblings(".video").toggleClass("toggle"); 
    }); 
});

당신은 아마도 텍스트 DIV 클릭, 그래서 당신이 다시로 전송되는 비디오 사업부에 등록 된 클릭이 없습니다.

출처

2017-09-03 03:35:52 deg

아, 네, 완벽하게 작동합니다 !!!!! 고맙습니다! – jehm

zQuery reordering을위한 jQuery toggleClass는 한 번만 작동합니다.

답변

관련 문제