Блог

Главная - Вопросы по программированию - Как я могу использовать parentNode с add / removeClass и аргументом IF для ?

Как я могу использовать parentNode с add / removeClass и аргументом IF для ?

#javascript #html #frontend #html5-audio

#javascript #HTML #интерфейс #html5-аудио

Вопрос:

У меня есть несколько <audio> контейнеров. При нажатии ‘Play’ я хочу настроить родительский аудиоконтейнер для воспроизведения вместо всех других контейнеров.

Каждый раз, когда я нажимаю кнопку воспроизведения, все аудиоконтейнеры запускаются и начинают воспроизведение. Что я хочу, так это настроить таргетинг на родительский контейнер нажатой кнопки и воспроизводить только этот контейнер.

Я понимаю, что могу использовать parentNode для этого, но всякий раз, когда я его реализую, я получаю сообщение об ошибке, независимо от того, использую ли я его для аргумента IF или синтаксиса add / removeClass.

 function playAudio(val) {
  var aud = $("audio")[val - 1];

  if (aud.paused) {
    aud.play();
    aud.loop = false;
    $(".play-pause").removeClass("icon-play");
    $(".play-pause").addClass("icon-stop");
  } else {
    aud.pause();
    $(".play-pause").removeClass("icon-stop");
    $(".play-pause").addClass("icon-play");
  }

  aud.ontimeupdate = function () {
    $(".progress")
      .css("width", (aud.currentTime / aud.duration) * 100   "%");

    var mins = Math.floor(aud.currentTime / 60);
    if (mins < 10) {
      mins = "0"   String(mins);
    }
    var secs = Math.floor(aud.currentTime % 60);
    if (secs < 10) {
      secs = "0"   String(secs);
    }

    $(".timestamp")
      .text(mins   ":"   secs);
  };
}  
 .player {
  position: relative;
  display: flex;
  border-radius: 0px;
  padding: 5 16px;
}

.player .info {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 50%;
  padding: 0 16px;
}

.player .info .name {
  font-size: 15px;
  font-weight: 700;
}

.player .info .singer {
  font-size: 12px;
}

.player .audioBtns {
  width: 50%;
  /*align-items: center;*/
  padding: 0 16px;
}

.player .audioBtns div:nth-child(1) {
  font-size: 30px;
}

.player .audioBtns div:nth-child(2),
.player .audioBtns div:nth-child(3) {
  font-size: 18px;
}

.player .progress {
  position: absolute;
  height: 5px;
  left: 0;
  bottom: 0;
  background-color: #f8f9fa;
  border-radius: 0px;
}

.icon-loop {
  content: url("loop.svg");
  width: 20px;
  height: 20px;
  display: block;
}

.icon-play:before {
  content: url("https://image.flaticon.com/icons/svg/860/860768.svg");
  width: 30px;
  height: 45px;
  display: block;
}

.icon-stop:before {
  content: url("https://image.flaticon.com/icons/svg/633/633940.svg");
  width: 30px !important;
  height: 40px !important;
  display: block;
}

.playBtn {
  padding: 0 16px;
}

.activeOverlay {
  filter: invert(42%) sepia(11%) saturate(1216%) hue-rotate(279deg)
    brightness(88%) contrast(85%);
}

.audioContainer {
  background-color: #d3d3d3;
  padding: 2% 2% !important;
}

.audioContainer:not(:last-child) {
  margin-bottom: 3%;
}

.audioContainerActive {
  background-color: #855b6f !important;
  color: #f8f9fa !important;
}

.IconActive {
  filter: invert(92%) sepia(17%) saturate(3434%) hue-rotate(186deg)
    brightness(127%) contrast(95%);
}  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- First Audio Container. OnClick on Line 5 -->
<div class="row no-gutters d-flex flex-column col-12">
  <div class="col d-flex flex-column justify-content-xl-center audioContainer">
    <div class="player">
      <div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(1)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"></audio>
      <div class="info">
        <div class="name">
          <p id="qwewq">By The Shell</p>
        </div>
        <div class="singer">
          <p>Adam M.</p>
        </div>
      </div>
      <div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
        <p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
      </div>
      <div data-toggle="tooltip" id="progressBar" class="progress"></div>
    </div>
  </div>

  <!-- Second Audio Container. OnClick on Line 25 -->

  <div class="col d-flex flex-column justify-content-xl-center audioContainer">
    <div class="player">
      <div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(2)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"></audio>
      <div class="info">
        <div class="name">
          <p id="qwewq-1">Turntable</p>
        </div>
        <div class="singer">
          <p>Adam M.</p>
        </div>
      </div>
      <div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
        <p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
      </div>
      <div data-toggle="tooltip" id="progressBar-1" class="progress"></div>
    </div>
  </div>
</div>

Ответ №1:

Запустите операцию только для выбранного, container используя метод jQuery eq()

Основные изменения:

 if (aud.paused) {
        aud.play();
        aud.loop = false;
        $(".play-pause").eq(val - 1).removeClass("icon-play"); // added .eq(val)
        $(".play-pause").eq(val - 1).addClass("icon-stop");
      } else {
        aud.pause();
        $(".play-pause").eq(val - 1).removeClass("icon-stop");
        $(".play-pause").eq(val - 1).addClass("icon-play");
      }
// -----------
$(".progress").eq(val - 1).css("width", (aud.currentTime / aud.duration) * 100   "%");
// -----------
$(".timestamp").eq(val - 1).text(mins   ":"   secs);

Рабочий пример ниже :

 function playAudio(val) {
  var aud = $("audio")[val - 1];

  if (aud.paused) {
    aud.play();
    aud.loop = false;
    $(".play-pause").eq(val - 1).removeClass("icon-play");
    $(".play-pause").eq(val - 1).addClass("icon-stop");
  } else {
    aud.pause();
    $(".play-pause").eq(val - 1).removeClass("icon-stop");
    $(".play-pause").eq(val - 1).addClass("icon-play");
  }

  aud.ontimeupdate = function() {
    $(".progress").eq(val - 1)
      .css("width", (aud.currentTime / aud.duration) * 100   "%");

    var mins = Math.floor(aud.currentTime / 60);
    if (mins < 10) {
      mins = "0"   String(mins);
    }
    var secs = Math.floor(aud.currentTime % 60);
    if (secs < 10) {
      secs = "0"   String(secs);
    }

    $(".timestamp").eq(val - 1)
      .text(mins   ":"   secs);
  };
}  
 .player {
  position: relative;
  display: flex;
  border-radius: 0px;
  padding: 5 16px;
}

.player .info {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 50%;
  padding: 0 16px;
}

.player .info .name {
  font-size: 15px;
  font-weight: 700;
}

.player .info .singer {
  font-size: 12px;
}

.player .audioBtns {
  width: 50%;
  /*align-items: center;*/
  padding: 0 16px;
}

.player .audioBtns div:nth-child(1) {
  font-size: 30px;
}

.player .audioBtns div:nth-child(2),
.player .audioBtns div:nth-child(3) {
  font-size: 18px;
}

.player .progress {
  position: absolute;
  height: 5px;
  left: 0;
  bottom: 0;
  background-color: #f8f9fa;
  border-radius: 0px;
}

.icon-loop {
  content: url("loop.svg");
  width: 20px;
  height: 20px;
  display: block;
}

.icon-play:before {
  content: url("https://image.flaticon.com/icons/svg/860/860768.svg");
  width: 30px;
  height: 45px;
  display: block;
}

.icon-stop:before {
  content: url("https://image.flaticon.com/icons/svg/633/633940.svg");
  width: 30px !important;
  height: 40px !important;
  display: block;
}

.playBtn {
  padding: 0 16px;
}

.activeOverlay {
  filter: invert(42%) sepia(11%) saturate(1216%) hue-rotate(279deg) brightness(88%) contrast(85%);
}

.audioContainer {
  background-color: #d3d3d3;
  padding: 2% 2% !important;
}

.audioContainer:not(:last-child) {
  margin-bottom: 3%;
}

.audioContainerActive {
  background-color: #855b6f !important;
  color: #f8f9fa !important;
}

.IconActive {
  filter: invert(92%) sepia(17%) saturate(3434%) hue-rotate(186deg) brightness(127%) contrast(95%);
}  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- First Audio Container. OnClick on Line 5 -->
<div class="row no-gutters d-flex flex-column col-12">
  <div class="col d-flex flex-column justify-content-xl-center audioContainer">
    <div class="player">
      <div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(1)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"></audio>
      <div class="info">
        <div class="name">
          <p id="qwewq">By The Shell</p>
        </div>
        <div class="singer">
          <p>Adam M.</p>
        </div>
      </div>
      <div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
        <p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
      </div>
      <div data-toggle="tooltip" id="progressBar" class="progress"></div>
    </div>
  </div>

  <!-- Second Audio Container. OnClick on Line 25 -->

  <div class="col d-flex flex-column justify-content-xl-center audioContainer">
    <div class="player">
      <div class="d-flex flex-row align-items-xl-center playBtn" onclick="playAudio(2)"><i class="fas fa-pause iconfont play-pause icon-play"></i></div><audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"></audio>
      <div class="info">
        <div class="name">
          <p id="qwewq-1">Turntable</p>
        </div>
        <div class="singer">
          <p>Adam M.</p>
        </div>
      </div>
      <div class="d-flex flex-row justify-content-around justify-content-xl-end align-items-xl-center audioBtns">
        <p class="timestamp" style="font-size: 20px;margin-bottom: 0px;">00:00</p>
      </div>
      <div data-toggle="tooltip" id="progressBar-1" class="progress"></div>
    </div>
  </div>
</div>

Метод jQuery eq()

  • Метод jQuery eq() используется для получения элемента с определенным индексом выбранного HTML-элемента. В качестве индекса можно указать положительное или отрицательное целое значение. Индекс первого элемента соответствующего элемента равен 0. Если мы используем selector.eq(-1), он вернет последний элемент, а selector.eq(0) вернет первый элемент в соответствующем наборе элементов.
  • синтаксис — selector.eq(индекс)

Ссылка: click_here

Комментарии:

1. Это идеально. Спасибо! Я продолжаю удивляться тому, сколько разных методов есть в JavaScript / jQuery

2. Выполнено. Спасибо!