Question

我已经制作了可能会死的GoT charachters列表（没有剧透或什么都没有）。我遇到的问题是我应该删除一个课程，但我不能让它工作。我可以删除CSS，我知道但这不是我想要在这里实现的。我找不到在JS事件/函数中删除CSS类的方法。

我可以通过删除“li”标签来使其工作，以便我完成了部分。

我的HTML：

<ul class="carousel">
   <!-- <li><img src="images/cersei-lannister-1920.jpg" alt="Cersei Lannister" title="Cersei Lannister"/></li>
    <li><img src="images/daenarys-1920.jpg" alt="Daenarys" title="Daenarys"/></li>
    <li><img src="images/maetser-varys-1920.jpg" alt="Maester Varys" title="Maester Varys"/></li>-->
</ul>

MY JS：

function changeImageIndex(value){
    let charachter =["images/cersei-lannister-1920.jpg","images/daenarys-targaryen-1920.jpg", "images/maester-varys-1920.jpg", "images/margarey-tyrell-1920.jpg", "images/petyr-baelish-1920.jpg", "images/samwell-tarly-1920.jpg", "images/sansa-stark-1920.jpg"];


    let str = "<li><img src='";


    if(value === "1")
    {
        parseInt(i += 1);
        if( i > 6)
        {
            i = 0
        }
        str += charachter[i];

        console.log(str);
    }

    else{
        parseInt(i -= 1);
        if( i < 0)
        {
            i = 6;
        }

        str += charachter[i];
        console.log(str);
    }




    str += "'></img></li>";

    console.log(str);


    let HTML = document.getElementsByClassName("carousel")[0];
    console.log(document.querySelector("ul li").classList.remove("carousel"));

    document.querySelector("li").classList.remove("carousel");


    HTML.innerHTML = str;


}

我想要的CSS：

.carousel li {
  display: none;
}

我希望你们能在这里帮助我！谢谢！

Answer 1

创建一个单独的课程".hidecarousel" for display:none并将其添加到您的CSS中。在li标记中使用班级名称。然后使用javascript简单地删除它。

var list = document.getElementsByClassName("hidecarousel");
while (list.length)
    list[0].classList.remove("hidecarousel");

以下是如何将carousel ul中所有li的CSS更改为阻止。

var array_of_li = document.querySelectorAll("ul.carousel li");
var i;
for (i = 0; i < array_of_li.length; ++i) {
  array_of_li[i].style.display = "block";
}

.carousel li {
  display: none;
}

<ul class="carousel">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Answer 2

根据我的理解，你没有使用jQuery，所以这里是用于从元素中删除类的Javascript解决方案。

ELEMENT.classList.remove("CLASS_NAME");

Answer 3

也许如果你用js和CSS添加一个类，你可以做你想做的事情

.carousel li.active{display:inline-block;}

希望你能成功：）

从JS中的css类中删除display：none

3 个答案: