jQuery -> Форум на Исходниках.Ру

	Наши проекты: Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту

Здравствуйте, Гость ! [34.239.150.167]

Модераторы: ElcnU, ANDLL, fatalist

Новое голосование

jQuery , jQuery - CSS

cupoma58

Сообщ. #1 , 15.06.24, 11:27

Junior

Профиль · PM

Рейтинг (т): нет

Привет.
Есть код:

// управление звуком/системным слайдером:

$('.sound-on').on('click', () => {

$('.player')[0].muted = !$('.player')[0].muted;

return false;

});

// кнопка вкл/выкл, со сменой иконки:

$('.sound-on').on('click', () => { // click по кнопке с url-иконкой "звук вкл."

if ($('.player').attr('muted') == false) { // если звук есть

$('.player').attr('muted', true); // выключаем звук

$('.sound-on').addClass('sound-off'); // добавляем на кнопку url-иконку "звук выкл."

}

else { // click по кнопке с url-иконкой "звук выкл."

$('.player').attr('muted', false); // включаем звук

$('.sound-on').removeClass('sound-off'); // добавляем на кнопку url-иконку "звук вкл."

}

});

Звук - отключается/включается, по клику, иконка - не меняется.
Иконки - CSS:background:url(...);
Что посоветуете(кроме смены типа кнопок)?

Majestio

Сообщ. #2 , 15.06.24, 21:52

Злое Солнце

Профиль · PM

Рейтинг (т): 33

Ну вот тебе пример работающего кода (онлайн):

<!DOCTYPE html>

<html>

<head>

<title>Управление звуком</title>

</head>

<body>

<a class="btn waves-effect light-blue darken-1" id="playButton"><i class="material-icons right">play_arrow</i>Запустить</a><br>

$(document).ready(function() {

var audioElement = $('audio')[0];

$('audio').on('ended', function() {

console.log('Воспроизведение аудио завершено');

$('#playButton').removeClass('red');

$('#playButton').addClass('light-blue');

$('#playButton').html('<i class="material-icons right">play_arrow</i>Запустить');

});

$('#playButton').click(function() {

if (audioElement.paused) {

console.log('Аудио на паузе - запускаем ...');

$('#playButton').removeClass('light-blue');

$('#playButton').addClass('red');

$('#playButton').html('<i class="material-icons right">pause</i>Остановить');

audioElement.play();

} else {

console.log('Аудио воспроизводится - останавливаем ...');

$('#playButton').removeClass('red');

$('#playButton').addClass('light-blue');

$('#playButton').html('<i class="material-icons right">play_arrow</i>Запустить');

audioElement.pause();

}

});

</script>

</body>

</html>

В нем используется JQuery и библиотека Materialize, а также иконки для кнопки Material+Icons. Код можно также записать в локальный файл и открыть в браузере - все нужное загрузиться с инета.

В твоем же коде, я так думаю - следует не создавать два блока $('.sound-on').on('click',..., а реализовать все нужное в одном блоке. Ну как предположение :-?

cupoma58	Сообщ. #3 , 16.06.24, 09:12
Junior Профиль · PM Рейтинг (т): нет	Цитата Majestio @ 15.06.24, 21:52 Ну как предположение Благодарю за предложение. Вариант - интересный. Я, в jQuery, полез из-за быстрого доступа, в том числе и к CSS. Хотелось, свою url-картинку, задействовать.

Majestio

Сообщ. #4 , 16.06.24, 10:12

Злое Солнце

Профиль · PM

Рейтинг (т): 33

Цитата cupoma58 @ 16.06.24, 09:12

Цитата Majestio @ 15.06.24, 21:52

Ну как предположение

Благодарю за предложение. Вариант - интересный. Я, в jQuery, полез из-за быстрого доступа, в том числе и к CSS. Хотелось, свою url-картинку, задействовать.

Ну тут особых изысков нет. Если ...

1) меняем состояние по событию - описываем его в одном блоке, в частности в $('#playButton').click(function() {
2) если меняем состояние (отрисовку) по набору классов - применяем .removeClass( или .addClass(
3) если нужно менять содержимое тега, то применяем .html(

Все остальное решается дебагом с помощью console.log(тру-ля-ля) ... Вощем это всё есть в предоставленным мною выше коде.

Добавлено 16.06.24, 10:27
cupoma58, и вдогонку ... определённая практика мне, скажем так, "утерла нос" - нужно обязательно использовать существующие наработки, типа bootstrap 5, Material Design for Bootstrap 5, или Materialize, ну или еще чё-нить. Это хорошо экономит время на дезигн

В конечном счете, если ты считаешь это излишком - оттуда ты сможешь снять оформление в виде набора CSS-правил. Только подумай - а надо ли тебе гемор по извлечению правил оформления? Там разница может быть в 100-200kb. Подумай 10 раз - стоит ли твоя кастомизация того? =)

cupoma58

Сообщ. #5 , 16.06.24, 19:39

Junior

Профиль · PM

Рейтинг (т): нет

Цитата Majestio @ 16.06.24, 10:12

Ну тут особых изысков нет. Если ...

не спешить, когда занимаешься чем-то новым:

// кнопка вкл/выкл звук, со сменой иконки:

$('.sound-on').on('click', () => { // click по кнопке с url-иконкой "звук вкл."

if ($('.player').prop('muted') == false) { // если звук есть (в jQuery 1.7+ не attr а prop)

$('.player').prop('muted', true); // выключаем звук

$('.sound-on').addClass('sound-off'); // добавляем, на кнопку, url-иконку "звук выкл." (в jQuery свои object, для неё кнопки

// sound-on - не существует, поскольку она в DOM, а sound-off - теперь знакома)

}

else { // click по кнопке с url-иконкой "звук выкл."

$('.player').prop('muted', false); // включаем звук

$('.sound-on').removeClass('sound-off'); // удаляем, с кнопки, url-иконку "звук выкл."

$('.sound-on').addClass('sound-on'); // добавляем, на кнопку, url-иконку "звук вкл."

}

});

С наскоку, хотел - низя-я-а

Majestio

Сообщ. #6 , 16.06.24, 20:12

Злое Солнце

Профиль · PM

Рейтинг (т): 33

Ну норм, но есть ньюансик!
Странный кусок кода $('.sound-on').addClass('sound-on');
Мы элементу с классом sound-on добавляем ... внимание, ворнинг, ахтунг ... сирена ... барабаны :lol:

класс sound-on.
Очень рекомендую ссылаться на элементы не по классам, а по id. Это будет по фэн-шую. Ибо элементов с классом может быть овер дофига, а id на странице обязан быть уникальным.

cupoma58	Сообщ. #7 , 21.06.24, 16:46
Junior Профиль · PM Рейтинг (т): нет	Цитата Majestio @ 16.06.24, 20:12 Цитата а id на странице обязан быть Это - да. Только, если sound-on не добавить к sound-on , то кнопка не поменяется. А id - это - голова, да.

0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)

0 пользователей:

[ Script execution time: 0,0291 ] [ 15 queries used ] [ Generated: 6.10.24, 09:41 GMT ]