1

我想将“元素”的属性放入变量中，并在控制台中收到消息“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>

4

2 回答 2

2

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

示例（工作）：

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

示例（不工作，因为是数组）：

var element = document.getElementsByTagName("li").getAttribute("class");
于 2018-10-21T21:32:35.543 回答
0

我认为这个块不起作用..你的下一个元素是未定义的。您的列表没有用于获取活动元素的类名。您在 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');
  }
于 2018-10-21T22:46:03.987 回答