特定のdiv内にある複数の要素のclick toggleClass

私のコードは、.text要素と.video要素のクラスをトグルしますが、特定のdiv内のものだけでなく、ページ上にあります。 find（）を使って何かが間違っていると仮定しています。これらの関数では、青い枠線で要素をクリックすると、その要素に関連付けられた点線の境界要素が表示されます。クリック可能性は、どの要素が完全に表示され、青色の境界線を持っているかに応じて切り替える必要がありますが、私はそれも機能しません。青色と点線の境界要素の両方を同時にクリックできます。特定のdiv内にある複数の要素のclick 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"> 
       <p id="text1" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</p> 
       <div id="video1" class="video"> <video loop muted><source src=assets/IMG_1353.MOV></video></div> 
     </div> 
     <div id = "box2" class="box"> 
       <p id="text2" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</p> 
       <div id="video2" class="video" > <video loop muted><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/></video></div> 
     </div> 
     <div id = "box3" class="box"> 
      <p id="text3" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</p> 
     </div> 
    </div> 
</body> 
<script> 
$(document).ready(function(){ 
    $(".box").find(".video").click(function() { 
     $(".video, .text").toggleClass("toggle"); 
    }); 
    $(".box").find(".text").click(function() { 
     $(".video, .text").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 { 
    flex-direction: column; 
    margin-left: 10%; 
    margin-right: 10%: 

} 

.box { 
    flex: 0 0 auto; 
} 

#box1 { 
    border: solid 1px; 
    width: 700px; 
    height: 400px; 
    padding: 5%; 
} 

#box2 { 
    border: solid 1px; 
    width: 700px; 
    height: 400px; 
    padding: 5%; 
} 

#box3 { 
    border: solid 1px; 
    width: 700px; 
    height: 400px; 
    padding: 5%; 
} 

.text { 
    width: 700px; 
    height: 400px; 
    position: absolute; 
    font: .9em courier; 
    line-height: 160%; 
    padding: 20px; 
    border: 1px dashed; 
    color: rgba(0,0,0, .2) 
} 

.video { 
    position: absolute; 
    padding: 2px; 
    border: 1px solid blue; 
} 

video { 
    width: 700px; 
} 

.toggle.video { 
    border: 1px dashed; 
    z-index: -10; 
} 

.toggle > video { 
    opacity: .05; 
} 

.toggle.text { 
    border: 1px solid blue; 
    z-index: 10; 
    color: rgba(0,0,0, 1) 
}

出典

2017-09-04 jehm

は、これはあなたが達成したいですか？部分的に

.text { 
    width: 700px; 
    height: 400px; 
    position: absolute; 
    font: .9em courier; 
    line-height: 160%; 
    padding: 20px; 
    border: 1px dashed; 
    color: rgba(0,0,0, .2); 
    display: none; 
    opacity: .8; 
    z-index: 2; 
    background-color: #bbb; 
} 

.video { 
    position: absolute; 
    padding: 2px; 
    border: 1px solid blue; 
    z-index: 1; 
} 

video { 
    width: 700px; 
} 

.vtoggle { 
    border: 1px dashed; 
} 

.vtoggle > video { 
    /*opacity: .05;*/ 
} 

.ttoggle { 
    border: 1px solid blue; 
    color: rgba(0,0,0, 1); 
    display: block; 
}

出典

2017-09-04 22:53:25 deg

：

$(document).ready(function(){ $(".box").children(".video").click(function() { if (!$(this).hasClass("vtoggle")) { $(this).siblings(".text").toggleClass("ttoggle"); $(this).toggleClass("vtoggle"); } }); $(".box").children(".text").click(function() { $(this).siblings(".video").toggleClass("vtoggle"); $(this).toggleClass("ttoggle"); }); });

再編集CSS！これは、ページ上のすべての要素を切り替えることで問題を解決します。しかし、divのtext要素とvideo要素の両方が同時にクリック可能になります。私が必要と思うのは、いずれかの関数を実行する前に.toggleをチェックするif/else文です。 .toggleがtrueの場合は、記述したように.text関数を実行します。そうでなければ、.video関数を実行します。思考？ – jehm

私は、最初に必ず「divのテキストとビデオの両方の要素を同時にクリックすることができる」ことを確認する必要があると思うのは、ビデオ要素とテキスト要素が整列していないからです。 – deg

jqと一緒に行くために編集されたCSSを表示します。 – deg

特定のdiv内にある複数の要素のclick toggleClass

答えて

関連する問題