JavaScript不適用於具有兩個類的元素

我正在使用引導程序list-group，並且列表項有兩個類。我正在使用JavaScript，並且當我只有一個類video時它工作正常，但當我添加list-group-item類時，它不起作用。JavaScript不適用於具有兩個類的元素

<html> 
<head></head> 
<body> 
    <div class="list-group list-special"> 
     <a class="video list-group-item active" href="M0mx8S05v60"><span class="badge">8:56</span>Lec 1: What is Signal?</a> 
     <a class="video list-group-item" href="F5h3z8p9dPg"><span class="badge">9:35</span>Lec 2: What is an Analog Signal?</a> 
     <a class="video list-group-item" href="jRL9ag3riJY"><span class="badge">8:48</span>Lec 3: What is Digital Signal?</a> 
     <a class="video list-group-item" href="izBaDRyqnBk"><span class="badge">5:13</span>Lec 4: Need of Digital Signal</a> 
     <a class="video list-group-item " href="2xXErGeeb_Q"><span class="badge">6:42</span>Lec 5: Inroduction to Digital Electronics</a> 
     <a class="video list-group-item" href="RF9I6UzI4Rc"><span class="badge">9:41</span>Lec 6: Switch and Bits Intuition</a> 
    </div> 

    <script type="text/javascript"> 
     var onVideoLinkClick = function(e){ 
      if(e.target.tagName == 'A' && e.target.classList.contains('video')) { 
       var videoID = e.target.getAttribute('href'); 
       history.pushState(
        {videoID: videoID}, 
        e.target.innerText, 
        'video-'+videoID) 

       changeVideo(videoID) 

       e.preventDefault(); 
      } 
     } 
     var changeVideo = function(videoID){ 
      var src = 'https://www.youtube.com/embed/'+videoID; 
      document.getElementById("videoFrame").src = src; 
     } 

     var onUrlChange = function(e){ 
      changeVideo(e.state.videoID) 
     } 

     window.addEventListener('click', onVideoLinkClick); 
     window.onpopstate = onUrlChange; 
    </script> 
</body> 
</html>

來源

2015-12-14 Sujeet Singh

爲什麼不簡單地將完整的url放在href屬性中？ – jeff

請注意，* innerText *是一個專有的IE屬性，所有使用的瀏覽器都不支持。 – RobG

我對'.contains（）'函數感到懷疑，你的意思是https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes？ –

我測試你的代碼，它似乎很好，但是當你在<span class="badge">標籤點擊，因爲它不會通過條件e.target.tagName == 'A'

的解決方案是將事件監聽器添加到它不會工作只而不是video元素到window，我做了這方面的工作小提琴https://jsfiddle.net/prh6vfza/

我也建議你使用jQuery附加事件

來源

2015-12-15 07:10:08 Gaafar

爲什麼變得如此複雜！您可以直接使用視頻類獲取錨點標記並將事件監聽器附加到它。通過這個可以避開條件檢查的目標是a JS

// Get all anchor tags with video class 

    var allAnchorTags = document.getElementsByClassName('video'); 

    // Use [].slice.apply(cards) to convert the cards NodeList into an array 
    // Iterate over the cards array with a .forEach 

    [].slice.apply(allAnchorTags).forEach(function(aTags,index){ 
    // Attach eventlistener to it 

      aTags.addEventListener('click',function(e){ 
       changeVideo(e.target.getAttribute('href')); 
       },false) 
      }) 

     function changeVideo(videoId){ 
      alert(videoId) 
      var src = 'https://www.youtube.com/embed/'+videoID; 
       document.getElementById("videoFrame").src = src; 
      }

WORKING DEMO

注：無法理解這個part.So didnt包含在演示。看起來它是一個數組，並且想要將元素推入它。請注意所有右花括號

history.pushState(
        {videoID: videoID}, 
        e.target.innerText, 
        'video-'+videoID) 

       changeVideo(videoID) 

       e.preventDefault(); 
      }

來源

2015-12-28 10:28:51 brk

JavaScript不適用於具有兩個類的元素

回答

相關問題