如何选择具有此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>这里有一些 cssheader {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 {

  background-color: pink;

}

.yellow-header {

  background-color: yellow;

}

.grey-header {

  background-color: grey;

}

在你的 JS 中

 document.getElementById('header').className = (x[slideIndex - 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">

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

Answer 3

我运行你的代码，它是工作

双笔

我认为你可以尝试改变颜色

if (yellowHeader) {

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

} 

if (greyHeader) {

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

}