添加班级名册.添加到自定义HTML5标记的第n个子

Add classList.add to nth-child of custom HTML5 tag

本文关键字：添加 个子 自定义 加班 HTML5      更新时间：2023-09-26

我有自定义标签<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>

我确信这不是最好的方法，我试过使用文档。querySelectorAll使代码更短，但不能这样做。有没有更好、更短的方法来做到这一点?我可以继续这样做，但如果你能给我一个更好的方法，那就很有教育意义了。

如果你会使用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());} });

相关文章：