Изменить картинку при клике

231
31 мая 2017, 05:34

Доброго времени суток. Ситуация такая: на сайте есть видео, вставил его с помощью тега video, так сделал кнопку плэй и пауза, по умолчанию видео проигрывается сразу как только загрузилась страница, и картинка у кнопки стоит Пауза. Я сделал что бы по клику на кнопку у видео срабатывает пауза, но мне нужно что бы еще и менялась картинка с Паузы на Плэй.

Я пробывал с jquery с добавлением класса у которого бэгроунд с нужной картинкой, но это срабатывает тольок один раз когда клинешь то класс подставляется, картинка меняется на плэй но по второму клику не чего не меняется, видео срабатывает пауза и картинка стоит Плэй хоть видео проигрывается хоть и на паузе.

Answer 1

Вы должны при клике второй раз удалять этот класс, который вы добовляли:

$(".play-pause").click(function() { 
  $(this).toggleClass("pause"); 
});
.play-pause { 
  width: 70px; 
  height: 70px; 
  background-image: url(data:image/png;base64,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); 
  background-size: cover; 
} 
 
.pause { 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAFYUlEQVR4Xu2dTWhcVRTHz7kzMUFJQlWsIm6Crlxo5r1JBAumoKA7oVBx0YofyUtRpH6A2+C+VQQTX0SKxEVBF+JKQW1ABTvzXiq6tIioC7EtxdSPTJO8KzNpobowN+258z7Ov9ued+49v/PjD3lMJkz4p5oAq54ewxMEUC4BBIAAygkoHx8JAAGUE1A+PhIAAignoHx8JAAEUE5A+fhIAAignIDy8ZEAEEA5AeXjIwEggHICysdHAkAA5QSUj48EgADKCSgfHwkAAZQTUD4+EgACKCegfHwkAARQTkD5+EgACKCcgPLxkQAQQDkB5eMjASCAcgLKx0cCQIBqEAgX2/s2LceUZdYYM51G4YeSkwVxcj2TPWCZa0O1taWvnt5zQbJ/Xr0qkwDjcXLWEN3UA5llZ9JDE7dIQm3E6QdMdl+3p83405VDwUOS/fPqVRkBgjixV0JMo1B0tmC+9QfVzA2Xzxjb9UP9/f37N/NanNS5opCkLnU1fXwLEMbt45b4se7dmOzHSdR85GruWbRnIIDjRqaOnRhavThykNnW14cG3v324D1/Oj5a6DIIUOj1+L8cBPDPuNAnQIBCr8f/5SCAI+PJt7/evbFZf7n7HmDArB89OX3fL46PFroMAjiup7GQLrOxD/TKLX2Tzobjjo8WugwCOK6nsZCssqHhrfIsG9v143V4D+AIrx9lfXgP8JolPnzpPcCxJGo+1Y+5fJ+BBHAlbC0Hi+kUW1tPfg0/oznOXB8tch0EKPJ2+nA3CNAHyEU+AgIUeTt9uBsEcITs+/MGjtcQL4MAjkh9f97A8RriZRDAEanvHzMdryFeBgEckUIAR1B5lflekO/+eXFDAjiShwCOoPIq870g3/3z4oYEcCQPARxB5VXme0G+++fFDQngSB4COILKq8z3gnz3z4sbEsCRPARwBJVXme8F+e6fFzckgCN5COAIKq8y3wvy3T8vbkgAR/IQwBFUXmW+F+S7f17cKpMA4wutM8aYm7dAZr+l0cRuSagQQJKmh15BnDxKWbZIhiwzTyczzY8kj4EAkjRL2AsClHBpkleGAJI0S9gLApRwaZJXhgCSND31as63x8ja9fazEz9LHwEBpIkK9wsWkyNk6cVeW0svpbPhUckjIIAkTeFed77x/eDo4Pm/iIzBe4Cdwa3Gi6A5a4Lb0p+I6PbeayCm1qmZcHJnKP6/GgkgSdNDryBOGtbaVw1TJ6uZV1aeCU5LHgMBJGmWsBcEKOHSJK8MASRplrAXBCj40qbmTtRXbx15kNl20plgmZj/9eXR13p9CHCtBD0/f+XXuTPZ15Oo+YLkkRBAkqZwr+4XOV+4OPz35bYZ0blTUXjpswEyh0EAGY5+unS/wStOvyOmu7feBGafpLMTD0seBgEkaXro1XyzdUc2YA5TRp3axuaR1nOT5ySPgQCSNEvYCwKUcGmSV4YAkjRL2AsCFHxpQZyMdv+sW8amMzKwurT85N41yStDAEmaHnrdO3/yi1qttqf3QwDx8ZUoeFzyGAggSVO413/fAxDZ82nUvFHyGAggSdNDr8Zb7c+ZeW+3NZN9L4maBySP8f2LJ5J33UmvanwghIjuf+fL4c7G4BOWeO33zujS6efv6uwExHa1vn/xZLvzff1/ZQTwBajqfSFA1Te8zXwQAAIoJ6B8fCQABFBOQPn4SAAIoJyA8vGRABBAOQHl4yMBIIByAsrHRwJAAOUElI+PBIAAygkoHx8JAAGUE1A+PhIAAignoHx8JAAEUE5A+fhIAAignIDy8ZEAEEA5AeXjIwEggHICysdHAkAA5QSUj48EgADKCSgfHwkAAZQTUD7+P0FaIZ9uHW85AAAAAElFTkSuQmCC); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="play-pause"></div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте tabernaculum.com.ua
ТОП-10
READ ALSO
Как остаться на странице после нажатия на кнопку SAVE
javascript

Как остаться на странице после нажатия на кнопку SAVE

У меня есть кнопка SaveПо нажатию на кнопку, я хочу изменить данные в БД, но полупользователь должен остался на странице

 190
Помощь в изучении js (Mentor guru) практика
javascript

Помощь в изучении js (Mentor guru) практика

Обращаюсь за советом, с чего начать изучение js, и где можно попрактиковаться, мб кто то согласиться стать моим гуру или менторомБуду очень...

 316
Как при выборе даты вызвать код на PHP?
javascript

Как при выборе даты вызвать код на PHP?

Есть поле type="date" - календарь; и есть код на PHP, который нужно выполнить при выборе даты при помощи Ajax запросаКак при выборе даты вызвать этот...

 350
Не срабатывает функция javascript
javascript

Не срабатывает функция javascript

Доброго времени! Собствено есть такой код:

 221