使用javascript通过点击事件切换ID？答案

【问题标题】：make a switch for ids with a click event using javascript?使用javascript通过点击事件切换ID？
【发布时间】：2019-04-02 14:19:54
【问题描述】：

我有一个包含两个视频元素的简单块，我有一个我想要的暂停按钮，当用户单击暂停按钮时，它会暂停当前正在播放的视频。

很遗憾，我的方法不起作用。我的代码做错了什么？

document.querySelector("#video-pause_btn").addEventListener('click', function() {
  console.log(($(this).attr('id')))
  switch ($(this).attr('id')) {
    case 'video-player_not-transformed':
      pauseVideo();
      break;
    case 'video-player_transformed':
      pauseTransfromedVideo();
      break;
  }
});

var pauseVideo = function() {
  var videoNotTransformed = document.querySelector('#video-player_not-transformed');
  videoNotTransformed.pause();
};

var pauseTransfromedVideo = function() {
  var videoTransformedID = document.querySelector('#video-player_transformed');
  videoTransformedID.pause();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <div class="video-container_details">
    <div id="video-pause_btn" class="video-btn">
      <img src="images/stop.png" />
    </div>
  </div>
  <div class="video-conatiner_datavideo">
    <video class="videoplayer" id="video-player_not-transformed">
      <source src="videos/explainer.mp4" type="video/mp4">
    </video>
  </div>
  <div class="video-container_transformed">
    <video id="video-player_transformed" style="width: 300px; height:auto; padding: 30px;">
      <source src="videos/transformed.mp4" type="video/mp4">
    </video>
  </div>

【问题讨论】：

您的 switch 逻辑已损坏，因为 $(this).prop('id') 只会返回 video-pause_btn，因为这是您分配事件处理程序的元素
如果你能帮忙，我需要改变什么才能得到我想要的东西？

标签： javascript jquery html html5-video

【解决方案1】：

您的开关逻辑已损坏，因为 $(this).prop('id') 只会返回 video-pause_btn，因为这是您分配事件处理程序的元素。

更好的方法是使用filter() 确定当前正在播放的视频，然后暂停并开始播放其他视频，如下所示：

var $videos = $('video');

$('#video-pause_btn').on('click', function() {
  var $playing = $videos.filter(function() {
    return !this.paused;
  }).get();

  if ($playing.length === 0) {
    $videos.first()[0].play();
  } else {
    $playing[0].pause();
    $videos.not($playing)[0].play();
  }
});

video {
  width: 250px;
  height: auto;
  padding: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <div class="video-container_details">
    <div id="video-pause_btn" class="video-btn">
      Play/pause
      <img src="images/stop.png" />
    </div>
  </div>
  <div class="video-conatiner_datavideo">
    <video class="videoplayer" id="video-player_not-transformed">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
  <div class="video-container_transformed">
    <video id="video-player_transformed">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
</div>

【讨论】：