Question

我想将“ element”的属性转换为变量，并在控制台中收到消息“ element.getAttribute不是函数”。

我在这里做什么错了？

这是我的完整代码： https://codepen.io/anon/pen/rqrePo

问题可能来自initAudio（prev）和initAudio（next），但我不确定确切的位置。

当我单击上一个和下一个时，它在第一条轨道上停止，因为它保留了上一个.active类（该类应仅在一个轨道上），可能会使代码发生冲突。

还认为有问题的代码部分是：

let next = $('.player__list__track.active').next(); if (next.length == 0) { next = $('.player__list__track:first-child'); }

// Init Audio
function initAudio(element) {
  let song = element.getAttribute("song");
  const theSong = document.querySelector('.player__bottom__infos__song');
  theSong.textContent = songTitle;

  let imgCover = element.getAttribute("cover");
  let artistName = element.getAttribute("artist");

  // Create audio object
  audio = new Audio('media/' + song);

  // Infos
  artist.textContent = artistName;
  song.textContent = songTitle;

  // Cover
  //cover.setAttribute("src", "img/covers/" + imgCover);

  // Playlist
  track.classList.remove('active');
  element.classList.add('active');
}

// Previous
prevButton.addEventListener('click', () => {
  audio.pause();
  let prev = $('.player__list__track.active').prev();
  if (prev.length == 0) {
    prev = $('.player__list__track:last-child');
  }
  initAudio(prev);
  audio.play();
  songDuration();
});

// Next
nextButton.addEventListener('click', () => {
  audio.pause();
  let next = $('.player__list__track.active').next();
  if (next.length == 0) {
    next = $('.player__list__track:first-child');
  }
  initAudio(next);
  audio.play();
  songDuration();
});

const prevButton = document.querySelector('.player__bottom__controls__buttons__prev');
const nextButton = document.querySelector('.player__bottom__controls__buttons__next');

const artist = document.querySelector('.player__bottom__infos__artist');
const theSong = document.querySelector('.player__bottom__infos__song');
const cover = document.querySelector('.player__bottom__infos__cover');

<!-- PLAYER LIST -->
<ul class="player__list">
  <li class="player__list__track" song="alan-walker-faded.mp3" cover="cover1.jpg" artist="Alan Walker" songtitle="Faded">Faded</li>
  <li class="player__list__track" song="avicii-levels.mp3" cover="cover2.jpg" artist="Avicii" songtitle="Levels">Levels</li>
  <li class="player__list__track" song="bastille-pompeii.mp3" cover="cover3.jpg" artist="Bastille" songtitle="Pompeii">Pompeii</li>
  <li class="player__list__track" song="imagine-dragons-radioactive.mp3" cover="cover4.jpg" artist="Imagine Dragons" songtitle="Radioactive">Radioactive</li>
  <li class="player__list__track" song="luis-fonsi-despacito.mp3" cover="cover5.jpg" artist="Luis Fonsi" songtitle="Despacito">Despacito</li>
  <li class="player__list__track" song="maroon5-animals.mp3" cover="cover6.jpg" artist="Maroon 5" songtitle="Animals">Animals</li>
  <li class="player__list__track" song="the-verve-bittersweet-symphony.mp3" cover="cover7.jpg" artist="The Verve" songtitle="Bittersweet Symphony">Bittersweet Symphony</li>
</ul>

<!-- PLAYER CONTENT -->
<div class="player__content">
  <div class="player__content__image">
    <img class="cover">
  </div>
</div>

Answer 1

您可以展示如何获取元素？

示例（有效）：

var element = document.getElementsByTagName("li")[0].getAttribute("class");

示例（由于数组不起作用）：

var element = document.getElementsByTagName("li").getAttribute("class");

Answer 2

我认为此阻止无效。您的下一个元素未定义。您的列表没有用于激活元素的类名。您在initAudio方法中添加了活动元素，但其第一行的元素错误为空。

// Init Audio
function initAudio(element) {
  let song = **element**.getAttribute("song");


 let next = $('.player__list__track.active').next();
  if (next.length == 0) {
    next = $('.player__list__track:first-child');
  }

element.getAttribute不是一个函数

2 个答案: