javascript - 使用 jQuery 改变导航栏背景颜色

Question

我有一个作品集网站，其中有 9 个元素。我正在使用 jQuery 循环插件来循环元素。我需要每个部分都有不同的导航栏背景颜色和标题颜色。

我的 html:

<header>
    <nav id="menu">
      <ul class="left">
        <li class="list-item"><button id="prev"></button></li>
        <li class="list-item dark-item" id="play"><a class="fancybox-media" href="https://vimeo.com/60763684">play</a></li>
        <li class="list-item dark-item"><button id="more">view more</button></li>
        <li class="list-item"><button id="next"></button></li>
      </ul>
      <ul class="right">
        <li class="list-item">
          <a href="#">about</a>
        </li>
        <li class="list-item">
          <a href="#">blog</a>
        </li>
        <li class="list-item">
          <a href="#">contact</a>
        </li>
      </ul>
    </nav>
  </header> 

  <div id="wrap">
    <section id="one">
      <div class="top-bg">
        <iframe class="hidden" src="//player.vimeo.com/video/56999419?title=0&amp;byline=0&amp;badge=0&amp;color=ef5e6f"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <div class="top-header">
          <h1>Sonhos, Rêves, Dreams</h1>
        </div>
        <div class="info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi magna, ultrices nec lacus vitae, tempor condimentum velit. Sed facilisis pellentesque diam et porttitor.</p>
        </div>
      </div>
        <div class="hidden-content hidden">
            <h1>Hidden-Content</h1>
        </div>
    </section>

    <section id="two">
      <div class="top-bg">
        <iframe class="hidden" src="//player.vimeo.com/video/60763684?title=0&amp;byline=0&amp;badge=0&amp;color=ef5e6f"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <div class="top-header">
          <h1>The Me Bird</h1>
        </div>
        <div class="info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi magna, ultrices nec lacus vitae, tempor condimentum velit. Sed facilisis pellentesque diam et porttitor.</p>
        </div>
      </div>
      <div class="hidden-content hidden">
        <h1>Hidden-Content</h1>
      </div>
    </section>

    <section id="three">
      <div class="top-bg">
        <iframe class="hidden" src="//player.vimeo.com/video/60603563?title=0&amp;byline=0&amp;badge=0&amp;color=ef5e6f"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <div class="top-header">
          <h1>Le Petit Pirate</h1>
        </div>
        <div class="info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi magna, ultrices nec lacus vitae, tempor condimentum velit. Sed facilisis pellentesque diam et porttitor.</p>
        </div>
      </div>
      <div class="hidden-content hidden">
        <h1>Hidden-Content</h1>
      </div>
    </section>

和我的 js 文件:

$(document).ready(function () {
    $('#wrap').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
    });

    $('#more').on('click', function(){
        $('.hidden-content').removeClass('hidden');
        $('.hidden-content').addClass('show');
        var y = $(window).scrollTop();
        $(window).scrollTop(y+100);
    });

    $('#prev, #next').on('click', function () {
        $('.hidden-content').removeClass('show');
        $('.hidden-content').addClass('hidden');
    });

    $('#two').ready(function() {
        $('nav').css('background', '#b1e0eb');
    });

    $('#play').click(function(e) {
        e.preventDefault();
        $('iframe').removeClass('hidden');
        $('iframe').addClass('show');
        $('iframe').attr('autoplay', '1');
        $('.top-header, .info').css('z-index', '-1');
    });
});

如果我这样做，所有部分都会获得我用 jquery 添加的颜色。但我希望我的每个元素都有不同的颜色。

谁能帮帮我？

Answer 1

你可以这样做

在你的 CSS 中

.bgcolor1 { background: blue; }
.bgcolor2 { background: green; }
.bgcolor3 { background: yellow; }
etc

在你的 jquery 中

var bgcolornumber = 1;

$('#more').on('click', function(){
    $('.hidden-content').removeClass('hidden');
    $('nav').removeClass('bgcolor'+bgcolornumber-1); // this probably not needed, but use it to remove the previous background class
    $('.hidden-content').addClass('show');
    $('nav').addClass('bgcolor'+bgcolornumber);  // adds the new class with the new background color
    bgcolornumber += 1; // adds 1 to the var, so you can grab the next background color from css