remove display:none from a css class in JS

问题内容:

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!

问题评论:

原文地址:

https://stackoverflow.com/questions/47756832/remove-displaynone-from-a-css-class-in-js

Add a Comment