將classList.add添加到自定義HTML5標記的第n個子標記

Question

我有自定義標記<movie>。我想通過添加類或者做一些不同的事來操縱onclick（分別單獨）。這是我的代碼。

window.onload = function() 
 
{ 
 
    var movie1 = document.getElementsByTagName("movie")[0]; 
 
    var movie2 = document.getElementsByTagName("movie")[1]; 
 
    var movie3 = document.getElementsByTagName("movie")[2]; 
 
    var movie4 = document.getElementsByTagName("movie")[3]; 
 
    movie1.onclick = function() { 
 
     movie1.classList.add("transparent"); 
 
     } 
 
    movie2.onclick = function() { 
 
     movie2.classList.toggle("transparent"); 
 
     } 
 
    movie3.onclick = function() { 
 
     movie3.parentNode.removeChild(movie3); 
 
     } 
 
    movie4.onclick = function() { 
 
     movie4.innerHTML = movie2.innerHTML; 
 
     } 
 
};

<container> 
 
    
 
    <movie> 
 
     <title></title> 
 
     <img src="" alt="" /> 
 
     <p></p> 
 
    </movie> 
 
    
 
    <movie> 
 
     <title></title> 
 
     <img src="" alt="" /> 
 
     <p></p> 
 
    </movie> 
 
    
 
    <movie> 
 
     <title></title> 
 
     <img src="" alt="" /> 
 
     <p></p> 
 
    </movie> 
 
    
 
    <movie> 
 
     <title></title> 
 
     <img src="" alt="" /> 
 
     <p></p> 
 
    </movie> 
 
    
 
    
 
    </container>

我敢肯定這是不是要做到這一點的最好辦法，我嘗試使用document.querySelectorAll使代碼更短，但無法做到。 有沒有更好更短的方法來完成這個任務？我可以繼續這樣做，但如果你給我一個更好的方法，這將是非常有教育意義的。

Answer 1

如果你可以使用jQuery， var movies = $('movie'); movies.click(function(){ if ($(this) == movies[0]) {$(this).addClass('transparent');} if ($(this) == movies[1]) {$(this).toogleClass('transparent');} if ($(this) == movies[2]) {$(this).remove();} if ($(this) == movies[3]} {$(this).html(movies[1].html());} });