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

标签 jquery html css

我希望有人可以帮助我完成我的代码。

我基本上试图在单击某些元素时更改图标。然后,当单击图标时,它会同时上下动画更改图标图像。

我快到了。当您单击元素时,您会注意到一个问题,然后当您到达元素 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>

最佳答案

这里有两个问题。

  • 需要解绑点击事件
  • 在“nav3”的情况下,您正在检查是否 ($(this).hasClass("clickedYellow"))。应该是 if ($(this).hasClass("clickedBlue"))。
  • 移出逻辑以在 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-->

    关于jquery - 更改图标颜色并根据选择的元素。包括工作片段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44644564/

    相关文章:

    javascript - FullPage.js:div 定位问题

    html - 在另一个文档中包含一个HTML文档

    html - 如何在导航中删除列表项之间的空格(HTML/CSS)

    html - 导航栏不会完全覆盖屏幕

    javascript - 如何在 javascript 中解析 Dailymotion 视频网址

    jquery - 如何使用 jquery 禁用 kendo ui 下拉列表?

    php - 使用列值对 php 数组进行排序并打印到表中

    python - Django/Bootstrap 4:如何在多个父div内对齐元素

    javascript - jquery的动态内部html

    javascript - 在turbolinks.visit(url)之后是否有一种方法可以在选择菜单中显示选定的选项值