На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> jQuery , jQuery - CSS
    Привет.
    Есть код:
    ExpandedWrap disabled
        // управление звуком/системным слайдером:
        $('.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(...);
    Что посоветуете(кроме смены типа кнопок)?
      Ну вот тебе пример работающего кода (онлайн):

      ExpandedWrap disabled
        <!DOCTYPE html>
        <html>
        <head>
          <title>Управление звуком</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        </head>
        <body>
          <audio  src="https://onlinetestcase.com/wp-content/uploads/2023/06/100-KB-MP3.mp3" controls></audio><br>
          <a class="btn waves-effect light-blue darken-1" id="playButton"><i class="material-icons right">play_arrow</i>Запустить</a><br>
          <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
          <script>
            $(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',..., а реализовать все нужное в одном блоке. Ну как предположение :-?
        Цитата Majestio @
        Ну как предположение

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

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

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

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

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

          Добавлено
          cupoma58, и вдогонку ... определённая практика мне, скажем так, "утерла нос" - нужно обязательно использовать существующие наработки, типа bootstrap 5, Material Design for Bootstrap 5, или Materialize, ну или еще чё-нить. Это хорошо экономит время на дезигн :) В конечном счете, если ты считаешь это излишком - оттуда ты сможешь снять оформление в виде набора CSS-правил. Только подумай - а надо ли тебе гемор по извлечению правил оформления? Там разница может быть в 100-200kb. Подумай 10 раз - стоит ли твоя кастомизация того? =)
            Цитата Majestio @
            Ну тут особых изысков нет. Если ...
            не спешить, когда занимаешься чем-то новым:
            ExpandedWrap disabled
               // кнопка вкл/выкл звук, со сменой иконки:
                $('.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-иконку "звук вкл."
                   }  
                });

            С наскоку, хотел - низя-я-а
              Ну норм, но есть ньюансик!
              Странный кусок кода $('.sound-on').addClass('sound-on');
              Мы элементу с классом sound-on добавляем ... внимание, ворнинг, ахтунг ... сирена ... барабаны :lol: класс sound-on.
              Очень рекомендую ссылаться на элементы не по классам, а по id. Это будет по фэн-шую. Ибо элементов с классом может быть овер дофига, а id на странице обязан быть уникальным.
                Цитата Majestio @

                Цитата
                а id на странице обязан быть

                Это - да. Только, если sound-on не добавить к sound-on , то кнопка не поменяется. А id - это - голова, да.
                0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                0 пользователей:


                Рейтинг@Mail.ru
                [ Script execution time: 0,0279 ]   [ 15 queries used ]   [ Generated: 23.07.24, 01:57 GMT ]