jQuery on click toggleClass在特定div中找到的多個元素

我的代碼切換.text和.video元素的類，但全部在頁面上，而不是在特定的div中。我假設我使用find（）的方式有問題。我要用這些函數的效果是，點擊一個帶有藍色邊框的元素會顯示一個與之相關的虛線邊框元素。可點擊性然後應該根據哪個元素完全可見並且具有藍色邊框進行切換，但是我沒有那樣工作：藍色和虛線邊界元素都可以同時點擊。jQuery on click toggleClass在特定div中找到的多個元素

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

這是你想要達到什麼樣的？

$(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：

.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

晴！這解決了我在切換頁面上的所有元素時遇到的問題。但它仍然同時使div的文本和視頻元素可點擊。我認爲我需要的是一個if/else語句，在運行任何一個函數之前檢查.toggle。如果.toggle爲真，那麼按照你的寫法運行.text函數。否則，運行.video函數。思考？ – jehm

我認爲我們首先需要確保「它仍然同時保留div可點擊的文本和視頻元素」不是因爲視頻和文本元素不一致。 – deg

查看編輯回答爲CSS去與jq。 – deg

jQuery on click toggleClass在特定div中找到的多個元素

回答

相關問題