jquery - 更改图标颜色并基于选择的元素。包括工作片段

Question

我希望有人能帮我完成我的代码。

我基本上是想在单击某些元素时更改图标。然后当图标被点击时，它会上下动画同时改变图标图像。

我快到了。当您点击元素时，您会注意到一个问题，然后当您到达元素 3 时，切换会自动打开和关闭。

请查看我的代码片段，看看你们是否可以帮助我解决这个问题。

//CHANGE COLOR

function changeColor1() {
  $('.jumbotron').css('background-color', '#6aabcb');
  $('.topBar').css('background-color', '#bdd2f1');
  $('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}

function changeColor2() {
  $('.jumbotron').css('background-color', '#e4b028');
  $('.topBar').css('background-color', '#ffce4e');
  $('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) ');
}

function changeColor3() {
  $('.jumbotron').css('background-color', '#6990f4');
  $('.topBar').css('background-color', '#4e7fff');
  $('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)');
}

$(document).ready(function() {
  $('.navLink').on('click', function() {
    var id = this.id;
    switch (id) {
      case 'nav1':
        $(".topBarInner").click(function(event) {
          event.preventDefault();

          if ($(this).hasClass("clicked")) {
            $("#contentContainer").stop().animate({
              marginTop: "0px"
            }, 200);
            $(".jumbotron, .headerRow").show(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
          } else {
            $("#contentContainer").stop().animate({
              marginTop: "160px"
            }, 200);
            $(".jumbotron, .headerRow").hide(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
          }

          $(this).toggleClass("clicked");
          return false;

        });
        break;
      case 'nav2':
        $(".topBarInner").click(function(event) {
          event.preventDefault();

          if ($(this).hasClass("clickedYellow")) {
            $("#contentContainer").stop().animate({
              marginTop: "0px"
            }, 200);
            $(".jumbotron, .headerRow").show(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)");
          } else {
            $("#contentContainer").stop().animate({
              marginTop: "160px"
            }, 200);
            $(".jumbotron, .headerRow").hide(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png)");
          }

          $(this).toggleClass("clickedYellow");
          return false;

        });
        break;
      case 'nav3':
        $(".topBarInner").click(function(event) {
          event.preventDefault();

          if ($(this).hasClass("clickedYellow")) {
            $("#contentContainer").stop().animate({
              marginTop: "0px"
            }, 200);
            $(".jumbotron, .headerRow").show(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)");
          } else {
            $("#contentContainer").stop().animate({
              marginTop: "160px"
            }, 200);
            $(".jumbotron, .headerRow").hide(200);
            $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png)");
          }

          $(this).toggleClass("clickedBlue");
          return false;

        });
        break;
    }
  });
});

.headerRow {
  padding: 52px 0;
  position: relative;
}

.jumbotron {
  margin-top: -10px;
  padding: 175px 0 0px 0;
  background-color: #6aabcb;
  color: white;
  position: relative;
}

.topBar {
  height: 11px;
  width: 98%;
  background-color: #bdd2f1;
  position: absolute;
  bottom: 20px;
}

.topBarInner {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 28px;
  width: 28px;
  margin: 0 auto;
}

.clicked {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
}

.clickedYellow {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png);
}

.clickedBlue {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png);
}

<div class="container">
  <div class="row headerRow">
    <a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg" /></a>
  </div>
</div>

<div class="jumbotron"></div>

<div id="contentContainer">
  <div class="row">
    <div class="col-xs-12">
      <div class="topBar">
        <div class="topBarInner"></div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <ul>
        <li><a href="javascript:;" onclick="changeColor1()" id="nav1" class="navLink">Item 1</a></li>
        <li><a href="javascript:;" onclick="changeColor2()" id="nav2" class="navLink">Item 2</a></li>
        <li><a href="javascript:;" onclick="changeColor3()" id="nav3" class="navLink">Item 3</a></li>
      </ul>
    </div>
  </div>
</div>
<!--/container-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

这里有两个问题。

1. 需要解绑点击事件

2. 如果是“nav3”，您正在检查 if ($(this).hasClass("clickedYellow"))。应该是 if ($(this).hasClass("clickedBlue")).

3. 将在 switch 语句之外附加点击事件的逻辑移出。

完整代码:

function changeColor1() {
    $('.jumbotron').css('background-color','#6aabcb');
    $('.topBar').css('background-color','#bdd2f1');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}

function changeColor2() {
    $('.jumbotron').css('background-color','#e4b028');
    $('.topBar').css('background-color','#ffce4e');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) ');
}
    
function changeColor3() {
    $('.jumbotron').css('background-color','#6990f4');
    $('.topBar').css('background-color','#4e7fff');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)');
}

$(document).ready(function(){
	var id = 'nav1';
    $('.navLink').on('click', function () {
		id = this.id;
   });
  $(".topBarInner").unbind('click');
  $(".topBarInner").click( function(event){
	  event.preventDefault();
	  switch(id) {
		case 'nav1':
				if ($(this).hasClass("clicked")) {
					$("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
					$(".jumbotron, .headerRow").show(200);	
					$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
				} else {
					$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
					$(".jumbotron, .headerRow").hide(200); 
					$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
				} 

				$(this).toggleClass("clicked");
		  break;
		case 'nav2':
				if ($(this).hasClass("clickedYellow")) {
					$("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
					$(".jumbotron, .headerRow").show(200);	
					$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)");
				} else {
					$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
					$(".jumbotron, .headerRow").hide(200); 
					$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png)");
				} 

				$(this).toggleClass("clickedYellow");

		  break;
		case 'nav3':
				if ($(this).hasClass("clickedBlue")) {
					$("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
					$(".jumbotron, .headerRow").show(200);	
					$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)");
				} else {
					$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
					$(".jumbotron, .headerRow").hide(200); 
					$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png)");
				} 

				$(this).toggleClass("clickedBlue");
		  break;
				
	  }
  });
}); 

.headerRow{
	padding:52px 0;
    position: relative;
	} 
    
.jumbotron {
	margin-top:-10px;
	padding:175px 0 0px 0;
	background-color:#6aabcb;
	color: white;
	position:relative;
	}
    
.topBar{
	height:11px;
	width:98%;
	background-color:#bdd2f1;
	position:absolute;
	bottom:20px;
	}
	
.topBarInner{
	background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
	background-repeat: no-repeat;
	background-size:contain;
	height:28px;
	width:28px;
	margin:0 auto;
	}
    
.clicked{
	background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
	}
    
.clickedYellow{
	background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png);
	}
    
.clickedBlue{
	background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png);
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row headerRow">
        <a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg"/></a> 
    </div>  
</div>

<div class="jumbotron"></div>

<div id="contentContainer">   
	<div class="row">
        <div class="col-xs-12">
            <div class="topBar"><div class="topBarInner"></div></div>  
        </div>
    </div>
    
    <div class="row">
    	<div class="col-xs-12">
            <ul> 
                <li><a href="#" onclick="changeColor1()" id="nav1" class="navLink">Item 1</a></li>   
                <li><a href="#" onclick="changeColor2()" id="nav2" class="navLink">Item 2</a></li>    
                <li><a href="#" onclick="changeColor3()" id="nav3" class="navLink">Item 3</a></li>    
            </ul>     
      	</div>
    </div> 
</div><!--/container-->