将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());} });