Изменение текста кнопки, а также функция fadetoggle в jquery

<button id="myButton">Play Video</button>

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

Таким образом, я получил этот код, который, в основном, выталкивает видео, когда я нажимаю кнопку playbutton, работает как шарм, но:

Я хочу, чтобы текст кнопки изменился на " Hide Video, как только они нажали "Воспроизвести видео" и вернулись к "Воспроизвести видео", если они нажмут "Скрыть видео",

Я нашел множество решений, но проблема в том, что jquery nub, что еще хуже, им очень нравится создание веб-сайтов.

Поэтому, где я должен поставить код, например, это решение:

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

настолько смущен тем, что им не хватает

2 ответа

Вот демонстрация

HTML:

<button id="myButton">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 есть ошибочный сценарий

Вы должны удалить

и

из него

Отредактировано 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');
 }
 });
});


Я думаю, что этот код может быть проще.

licensed under cc by-sa 3.0 with attribution.