jQuery的toggleClass Z-Index的只有重新排序工作是在这个会掉点击视频与特定于您所点击的视频文字的DIV一个jQuery函数一次

我的工作。要获得交换的效果我想申请一个CSS类有-10的z-index到点击视频股利。 ToggleClass工作一次，就不会切换回（即，把视频DIV回文本的前面）。jQuery的toggleClass Z-Index的只有重新排序工作是在这个会掉点击视频与特定于您所点击的视频文字的DIV一个jQuery函数一次

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

添加的console.log（somethingsomething）上。视频是点击事件，我想你可以在文本1被点击，当你认为你点击视频1的第2次。 – deg

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

您可能点击文本DIV，所以没有点击你送到后面的视频DIV注册。

来源

2017-09-03 03:35:52 deg

啊，是这个工程完全!!!!!谢谢！ – jehm

jQuery的toggleClass Z-Index的只有重新排序工作是在这个会掉点击视频与特定于您所点击的视频文字的DIV一个jQuery函数一次

回答

相关问题