JS第二天 项目(点击事件，audio播放暂停+Class.Remove图片/文字/背景切换)

https://www.cnblogs.com/chargeworld/p/10425415.html

原生js删除元素

var flag = false;
    $('.mediabox').on('click', function(e) {
        $(this).addClass('active').removeClass('default');
        $(this).siblings('.mediabox').removeClass('active').addClass('default');
        console.log($(this));

        $others = $(this).siblings().find('audio');
        var len = $others.length;
        for (var i = 0; i < len; i++) {
            $others.get(i).pause();
        }
        var $audio = $(this).find('audio').get(0)
        if ($audio.paused) {
            $(this).find('audio').get(0).play();
        } else {
            $(this).find('audio').get(0).pause();
        }
    })

或者

$('.mediabox').on('click', function (e) {
    $(this).addClass('active').removeClass('default');
    $(this).siblings('.mediabox').removeClass('active').addClass('default');
    $others=$(this).siblings().find('audio');
    let len=$others.length;
    for(let i=0;i<len;i++){
        $others.get(i).pause();
    }
    let a=$(this).find('audio').get(0);
    if(a.paused){
        a.play();
    }else{
        a.pause();
    }
})

或者

$('.mediabox').on('click', function (e) {
    $(this).addClass('active').removeClass('default');
    $(this).siblings('.mediabox').removeClass('active').addClass('default');
    var allAudio = document.querySelectorAll('.mediabox>.default');
    Array.prototype.forEach.call(allAudio, function (audio) {
        audio.pause();
    });
    var currentAudio = document.querySelector('.active>audio');
    var isPaused=currentAudio.paused;
    if (isPaused) {
        currentAudio.play();
    }
    else {
        currentAudio.pause();
    }
  })
//这个可以暂停自身，但是不能暂停所有

或者

var mediabox = document.getElementsByClassName('mediabox')
  console.log(mediabox)
  for(var i=0;i<mediabox.length;i++){
    console.log(mediabox[i])
    mediabox[i].onclick = function(){
      console.log(1)
      console.log(this)

      //播放
      var audios = document.getElementsByTagName('audio')
      for(var k=0;k<audios.length;k++){
        audios[k].pause()
      }
      var childNodes = this.childNodes
      var audio
      for(j=0;j<childNodes.length;j++){
        console.log(childNodes[j].nodeName)
        if(childNodes[j].nodeName === 'AUDIO'){
          audio = childNodes[j]
          break
        }
      }
      audio.play()
    }
  }
  function startSoundsByJs(event) {
    console.log(event)
    console.log(this)
    // var audio = 

  };
    //改背景图片
    $('.media-imgbox').click(function(){
    var obj=$(this);
    if(obj.hasClass('active')){
      obj.removeClass('active');
    }else{
      obj.addClass('active');
    }
  });
//不能暂停自身

不会jQuery太艰难了……我塔喵。开始Ajax，说是用wireshark抓包分析一下，用postman可以模拟ajax功能。

心好累，Ajax该怎么上手…………