मैं यही करने की कोशिश कर रहा हूं: यदि इस दस्तावेज़ में यह वर्ग है और इस वर्ग में यह आईडी है, तो शीर्षलेख पृष्ठभूमि रंग बदलें। मैं आईडी तत्व का चयन करने के लिए कथन और .is() का उपयोग करने की कोशिश कर रहा हूं, लेकिन यह काम नहीं कर रहा है।

मैं एक निश्चित हेडर के साथ एक स्लाइड वेबपेज बनाने की कोशिश कर रहा हूँ। मैं प्रत्येक स्लाइड के लिए हेडर का रंग बदलने की कोशिश कर रहा हूँ।

यहाँ कुछ HTML है

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

यहाँ कुछ सीएसएस है

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/ यंगुआ/पेन/bGEpwyd

हैडर 1 स्लाइड पर: हैडर 0 ग्रे होना चाहिए, हैडर 2 स्लाइड: हैडर 0 पीला होना चाहिए, हैडर 3 स्लाइड: हैडर 0 गुलाबी होना चाहिए

मैं यही करने की कोशिश कर रहा हूं

1
user13725426 11 जून 2020, 09:19

3 जवाब

सबसे बढ़िया उत्तर

ठीक है, सबसे पहले अपने सभी 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;
}

और आपके जेएस . में

 document.getElementById('header').className = (x[slideIndex - 1].getAttribute('id'));

यह लाइन क्या कर रही है:

  • वह स्लाइड प्राप्त करना जिसे आप प्रदर्शित करना चाहते हैं: x[slideIndex - 1]
  • इसकी आईडी लेना: .getAttribute('id')
  • इस आईडी को लेना और इसे हेडर के लिए एक वर्ग के रूप में रखना: document.getElementById('header').className =

इसका मतलब है कि यदि आपकी स्लाइड में "पिंक-हेडर" आईडी है, तो सीएसएस में "#पिंक-हेडर", आपके हेडर को "पिंक-हेडर" वर्ग मिलता है, इसलिए सीएसएस में ".गुलाबी-हेडर"।

0
djcaesar9114 12 जून 2020, 00:59

मैं आपका कोड चलाता हूं, यह काम है

कोडपेन

मुझे लगता है कि आप रंग बदलने की कोशिश कर सकते हैं

if (yellowHeader) {
$('header').css({"background-color":"red"});
} 
if (greyHeader) {
$('header').css({"background-color":"blue"});
}
0
Joinwang 11 जून 2020, 09:32

यदि आप कई सशर्त बयान दे रहे हैं, तो आपको if स्टेटमेंट को if-else के साथ श्रृंखलाबद्ध करना होगा। मैंने नीचे दिए गए jQuery को सही किया। याद रखें कि यह प्रत्येक कथन को क्रम से पढ़ेगा, और यदि पहला कथन सत्य है तो यह श्रृंखला के माध्यम से जारी नहीं रहेगा

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>
0
Xenvi 11 जून 2020, 09:42