從JS中的CSS類中刪除display：none

Question

我已經列出了可能會死亡的GoT角色（沒有劇透，也從未如此）。 我遇到的問題是我應該刪除一個類，但無法使其正常工作。 我知道我可以刪除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>

我的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");

您可以通過以下方法更改輪播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;}

希望你能做到 ：）