如何选择具有此ID的类来触发事件/如何更改每张幻灯片的标题颜色？

Question

这就是我试图做的：如果这个文档有这个类，这个类有这个ID，然后改变标题背景色。我一直在尝试做if语句并使用.is（）来选择id元素，但它不起作用。

我正在尝试创建一个具有固定标题的幻灯片网页。我正在尝试更改每张幻灯片的标题颜色。

这是一些

<header id="header">

  <h2 id="dialogues-header">HEADER—</h2>

  <h2 id="spring-right">Spring 2020</h2>

</header>

<div class="mySlides" id="grey-header">

  <div class="container">

    <main class="main-one">

        <img class="artwork" src="image.jpg" />

    </main>

    <aside class="info">

            <h3>Header</h3>

        <div class="text-blurb">

            <p>text</p>

        </div>

    </aside>

    <main class="main-two yellow">

        <h1 id="number">1</h1>

        <h1 id="name-right">name</h1>

    </main>

    <main class="main-three">

            <iframe src="link"></iframe>

    </main> 

  </div>

</div>

<div class="mySlides" id="yellow-header"> same as above </div>

这里有一些 css

header {

position: fixed;

/*-- other code omitted --*/

}

这是jquery代码

<script>

var yellowHeader = $(".mySlides").is("#yellow-header");

var greyHeader = $(".mySlides").is("#grey-header");

var pinkHeader = $(".mySlides").is("#pink-header");

if (yellowHeader) {

$('header').css({"background-color":"#FFF231"});

} if (greyHeader) {

$('header').css({"background-color":"#F4F4F4"});

}

</script>

编辑：嘿，我认为人们没有得到我想做的事情？所以我在这里添加了更多我的代码供您查看 - >https://codepen.io/youngua/pen/bGEpwyd

在页眉 1 幻灯片上：页眉 0 应为灰色，页眉 2 幻灯片标题：页眉 0 应为黄色，页眉 3 幻灯片：页眉 0 应为粉红色

这就是我想要做的

Answer 1

好的，首先把所有的JS放在单独的文件中，而不是HTML文件中。然后，使用 CSS 和 DOM 逻辑。你想要的是每次你改变幻灯片，标题的颜色都会改变，这意味着每次你改变幻灯片时，你的标题都会得到一个新的类：https://codepen.io/djcaesar9114/pen/mdVPmaV在你的简历中.pink-header {&nbsp; background-color: pink;}.yellow-header {&nbsp; background-color: yellow;}.grey-header {&nbsp; background-color: grey;}在你的 JS 中&nbsp;document.getElementById('header').className&nbsp;=&nbsp;(x[slideIndex&nbsp;-&nbsp;1].getAttribute('id'));这条线在做什么：获取要显示的幻灯片：x[slideIndex - 1]取其ID：.getAttribute('id')获取此 id 并将其作为标头的类：document.getElementById('header').className =这意味着，如果您的幻灯片具有ID“粉红色标题”，因此CSS中的“#pink标题”，则您的标题将获得类“粉红色标题”，因此CSS中的“.pink-header”。

Answer 2

如果要创建多个条件语句，则必须使用 if-else 链接 if 语句。我纠正了下面的j查询。请记住，它将按顺序遍历每个语句，如果第一个语句为真，则不会继续通过链var yellowHeader = $(".mySlides").is("#yellow-header");var greyHeader = $(".mySlides").is("#grey-header");var pinkHeader = $(".mySlides").is("#pink-header");if (yellowHeader) {$('header').css({"background-color":"#FFF231"});} else if (greyHeader) {$('header').css({"background-color":"#F4F4F4"});}header {position: fixed;/*-- other code omitted --*/}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><header id="header">&nbsp; <h2 id="dialogues-header">HEADER—</h2>&nbsp; <h2 id="spring-right">Spring 2020</h2></header><div class="mySlides" id="grey-header">&nbsp; <div class="container">&nbsp; &nbsp; <main class="main-one">&nbsp; &nbsp; &nbsp; &nbsp; <img class="artwork" src="image.jpg" />&nbsp; &nbsp; </main>&nbsp; &nbsp; <aside class="info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Header</h3>&nbsp; &nbsp; &nbsp; &nbsp; <div class="text-blurb">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>text</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </aside>&nbsp; &nbsp; <main class="main-two yellow">&nbsp; &nbsp; &nbsp; &nbsp; <h1 id="number">1</h1>&nbsp; &nbsp; &nbsp; &nbsp; <h1 id="name-right">name</h1>&nbsp; &nbsp; </main>&nbsp; &nbsp; <main class="main-three">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <iframe src="link"></iframe>&nbsp; &nbsp; </main>&nbsp;&nbsp; </div></div><div class="mySlides" id="yellow-header"> same as above </div>

Answer 3

我运行你的代码，它是工作双笔我认为你可以尝试改变颜色if (yellowHeader) {$('header').css({"background-color":"red"});}&nbsp;if (greyHeader) {$('header').css({"background-color":"blue"});}