Question

我的代码切换.text和.video元素的类，但是在页面上都是，而不仅仅是特定div中的那个元素。我假设我使用find（）的方式有问题。我对这些功能的影响是点击带有蓝色边框的元素会显示与之关联的虚线边框元素。然后点击能力应根据哪个元素完全可见并具有蓝色边框来切换，但我也没有这样做：蓝色和虚线边框元素可以同时点击。

HTML

Vue.component('time-range', {
  template: '#time-range',
  props: ['data'],
  data: {}
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
    addRange: function () {
        this.ranges.push('')
    },
  }
})

CSS

<!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>

Answer 1

这是你想要达到的目标吗？

$(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;
}

jQuery点击特定div中找到的多个元素的toggleClass

1 个答案: