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中找到的多个元素

回答

相关问题