1
<div class="track d-flex align-items-center">
  <span class="play">
    <i class="fa fa-play" aria-hidden="true"></i>
    <img class="pause" src="/images/pause-icon.svg" alt="">
  </span>
  <a href="/inner/music" class="d-flex flex-column track_name--wrap">
    <span class="track_name">Oh My Love</span>
    <span class="track_singer">The Score</span>
  </a>
  <div class="track_top ml-auto">1</div>
    <div class="track_download">
    <a href="#">
       svg class="download-icon">
          <use xlink:href="/images/sprite.svg#download"></use>
       </svg>
    </a>
  </div>
</div>

<div class="track d-flex align-items-center">
  <span class="play">
    <i class="fa fa-play" aria-hidden="true"></i>
    <img class="pause" src="/images/pause-icon.svg" alt="">
  </span>
  <a href="/inner/music" class="d-flex flex-column track_name--wrap">
    <span class="track_name">Oh My Love</span>
    <span class="track_singer">The Score</span>
  </a>
  <div class="track_top ml-auto">1</div>
    <div class="track_download">
    <a href="#">
       svg class="download-icon">
          <use xlink:href="/images/sprite.svg#download"></use>
       </svg>
    </a>
  </div>
</div>
let play = document.querySelectorAll('.track .play');
let playerContainer = document.querySelector('.audio-player-container');

Array.prototype.forEach.call(play, function (item) {
   item.addEventListener('click', function () {
       playerContainer.classList.add('show');
       item.classList.toggle('clicked');

       if (item.classList.contains('clicked')) {
           audioPlayer.api("play");
       } else {
           audioPlayer.api("pause");
       }
   });
});

Есть массив из кнопок play. При клике на play ему добавляется класс clicked, при повторном клике класс убирается. Нужно сделать так чтобы при клике на другую кнопку плей, класс убирался у предыдущей нажатой кнопки и добавлялся текущей нажатой кнопке. Но при этом чтобы работал и toggle класса если нажать на эту кнопку еще раз.

Описание работы кнопки

введите сюда описание изображения

2
  • Если хотите, чтобы Вам помогли - Выкладывайте то, что пробовали сами и разметку html.
    – Denis640Kb
    3 фев 2020 в 6:21
  • @Denis640Kb спасибо за совет 3 фев 2020 в 9:36

1 ответ 1

2

На jQuery в две-три строчки кода можно сделать:

$('.icon').click(function(){
  $(this).toggleClass('clicked');
  $('.icon').not(this).removeClass('clicked');
})
.song {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid silver;
}
.name {
  font-family: sans-serif;
  font-size: 16px;
  padding-left: 15px;
}
.icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6ba9ec;
  position: relative;
  cursor: pointer;
}
.icon:before {
  content: '';
  display: block;
  position: absolute;
  border: 12px solid transparent;
  border-left: 22px solid white;
  top: 15px;
  left: 20px;
}
.icon.clicked {
  background-color: #90919a;
}
.icon.clicked:before {
  border: 5px solid white;
  border-top: 0;
  border-bottom: 0;
  height: 22px;
  width: 7px;
  top: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="song">
  <div class="icon"></div>
  <div class="name"><b>Song One</b><br />Singer One</div>
</div>
<div class="song">
  <div class="icon"></div>
  <div class="name"><b>Song Two</b><br />Singer Two</div>
</div>
<div class="song">
  <div class="icon"></div>
  <div class="name"><b>Song Three</b><br />Singer Three</div>
</div>

1
  • спасибо большое, за помощь) 4 фев 2020 в 4:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.