javascript - 更改按钮的文本以及 jquery 中的 fadetoggle 函数

Question

<button id="myButton" class="comment-submit button small green">Play Video</button>

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle(3000);
    });
});

所以我得到了这段代码，当我点击播放按钮时，它基本上会弹出一个视频，就像一个魅力，但是:

我希望按钮的文本在他们点击“播放视频”后更改为隐藏视频，如果他们点击“隐藏视频”则返回“播放视频”

我找到了很多解决方案，但问题是，我是一个 jquery 新手，更糟糕的是，我对 Web 构建还很陌生。

那么我应该把代码放在哪里，例如这个解决方案:

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore2');
    if($this.hasClass('SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

对我错过的东西感到很困惑

Answer 1

这是demo

HTML:

<button id="myButton" class="videoHidden">Play Video</button>
<div id="videoWrap">Video is here</div>

CSS:

#videoWrap {
    width: 150px;
    height: 100px;
    background-color: #9ff;
    display: none;
}

JavaScript:

$(document).ready(function(){
    $('#myButton').click(function(){
        var $this = $(this);
        $("#videoWrap").fadeToggle();//or .toggle() for instant showing/hiding
        $this.toggleClass('videoHidden');

        if($this.hasClass('videoHidden')){
            $this.text('Play Video');           
        } else {
            $this.text('Hide Video');
        }
    });
});

所以:

1. 加载文档后，您将看到一个带有“播放视频”的按钮文本和“videoHidden”类
2. 当您单击按钮时，它会切换按钮上的“videoHidden”类(如果不存在或删除(如果存在)。它可以帮助您保存视频播放的一些“状态”。
3. 然后，您使用当前的“状态”将按钮的文本更改为相应的值(“播放视频”，如果视频未播放，如果视频正在播放，则“隐藏视频”)

<小时/>

已编辑

这里有一个错误http://biready.visseninfinland.nl/testing-2/ :

第 467 行有错误的脚本

<script>
    $('#myButton').click(function(){
        var $this = $(this);
        $("#videoWrap").slideToggle();</p>
<p>        $this.toggleClass('videoHidden');</p>
<p>     if($this.hasClass('videoHidden')){
            $this.text('Play Video');           
        } else {
            $this.text('Hide Video');
        }
    });
</script>

您应该删除</p>和<p>来自它

<小时/>

已编辑 2

脚本的最新版本(需要在 $(document).ready() 内执行附加处理程序):

$(document).ready(function(){
    $('#myButton').click(function(){
        var $this = $(this);
        $("#videoWrap").slideToggle();
        $this.toggleClass('videoHidden');
        if($this.hasClass('videoHidden')){
            $this.text('Play Video');
        } else {
            $this.text('Hide Video');
        }
    });
});