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

Question

I've made this list of GoT charachters that could possible die (there's no spoilers or what so ever). The problem I'm having is that I'm supposed to remove a class but I can't make it work. I could just remove the CSS, I know but that's not what I'm trying to achieve here. I can't find the way to delete a CSS class during a JS event/function.

I can make it work by deleting the "li" tags so that part I've completed.

My 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;


}

MY CSS that I want gone:

.carousel li {
  display: none;
}

I hope you guys can help me out here! Thanks!

Answer 1

Make a seperate class take ".hidecarousel" for display:none and add it to your CSS. Use the class name in your li tags. And then make use of the javascript to simply remove it.

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

Here is how you can change the CSS of all the li inside your carousel ul to block.

 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

Maybe if you add a class by js and in CSS you do what you want

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

Hope you can make it :)