Javascript 单击按钮时，如何显示视频和文本？

我真的很迷茫，不知道从哪里开始。所以基本上我想实现的是当点击按钮时，文本和视频会显示出来。否则，单击时将其隐藏

我想要它的样子

HTML

<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
    <video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>

<div class="shape1"></div>
    <p class="ability1txt">Text.</p>
<div class="button.abl">
    <button id="abl1.btn" class="ability1"></button>
</div>

使用

您可以始终使用原始Javascript，但使用jQuery会使事情变得更加简单。通常，Javascript用于交互

您的Javascript代码如下所示：

$(document).ready(function() {
    $('div.button\.abl button#abl1\.btn').click(function() {
        if ($('div#abli video').is(':visible') && $('p.ability1txt').is(':visible')) {
            $('div#abli video').hide(); // or fadeOut()
            $('p.ability1txt').hide(); // or fadeOut()
        } else {
            $('div#abli video').show(); // or fadeIn()
            $('p.ability1txt').show(); // or fadeIn()
        }
    });
});

---

您可以通过javascript执行以下操作：

函数ab1\u单击（）{
var vid1=document.getElementById（“ab1Video”）；
var t1=document.getElementById（“ab1Text”）；
var v=“可见”；
if（vid1.style.visibility！=“hidden”）{v=“hidden”}
vid1.style.visibility=v；
t1.style.visibility=v；
}

文本

显示/隐藏

您真的不需要JavaScript来显示/隐藏视频和文本。通过只使用CSS和HTML，我们可以通过策略性地放置复选框和标签隐藏任何内容。添加了一些JavaScript，以便视频在隐藏时暂停，但请求的显示/隐藏功能不需要任何JavaScript

演示中评论的详细信息

演示

//引用和
var v=document.getElementById（'vid0'）；
var c=document.getElementById（'chx0'）；
/*每当单击label.btn时，复选框都会触发
||改变事件。当一个变化发生时
||如果选中复选框，则将播放；如果
||不是
*/
c、 onchange=函数（e）{
如果（选中此项）{
v、 play（）；
}否则{
v、 暂停（）；
}
}

html，
身体{
宽度：100%；
身高：100%；
}
/*虽然.chx已经“消失”，但它仍然能够
||影响和被其他因素影响
*/
.chx{
显示：无
}
.案例{
显示：无；
高度：270px；
宽度：480px；
}
/*选中复选框后，将显示figure.case
||然后是label.btn，它依次
||下面显示复选框
*/
.chx:选中+.btn+.case{
显示：块；
}
#视频0{
宽度：100%；
身高：100%；
显示：块；
}
.帽{
文本对齐：居中；
宽度：100%；
字体大小：27px；
颜色：白色；
显示：表格；
背景：rgba（0,0,0,0.6）；
}
.btn{
字体大小：48px；
显示：内联块；
宽度：8厘米；
高度：2ex；
光标：指针；
颜色：#00f；
文本阴影：3px 1px 2px#555；
}
.btn：：之前{
内容:'▶'
}
/*选中该复选框后，将显示伪元素
||复选框后面的label.btn的
||要暂停的图标。
*/
.chx:选中+.btn:：之前{
内容:'⏸';
字体大小：54px；
}

1分/11秒领先

您需要使用一些JavaScript。给我们看看你的代码。这行不通！可见和显示在同一个位置branch@S.Serp抢手货更正了。谢谢

$(document).ready(function() {
    $('div.button\.abl button#abl1\.btn').click(function() {
        if ($('div#abli video').is(':visible') && $('p.ability1txt').is(':visible')) {
            $('div#abli video').hide(); // or fadeOut()
            $('p.ability1txt').hide(); // or fadeOut()
        } else {
            $('div#abli video').show(); // or fadeIn()
            $('p.ability1txt').show(); // or fadeIn()
        }
    });
});