js 设置ul li 中button(或者其他标签如img等等)的背景颜色

冷不防 2022-02-20 09:53 497阅读 0赞

### ***需求说明*** ###

0、选择是蓝色，没选中是白色

1、点击ul li中的button标签（或者是去其他的标签，都是一个意思） 的时候，如果未选中状态就变成选中状态，如果是选中状态就变成未选中状态

2、有一个框 里面统计的都是选中时候，标签里面的文字

3、每次点击，都会进行统计

--------------------

### ***应用的知识点*** ###

jquery、 ul li、for循环

--------------------

### ***实现的效果如下*** ###

1、点击合同纠纷，上面的输入框就会添加合同纠纷

2、当你再次点击合同纠纷，合同纠纷的背景颜色就是未选中的状态，输入框里面也不会有合同纠纷的字样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

--------------------

### ** html代码** ###

<div class="form-group">
    		<div class="col-sm-10">
    			请选择1-3个您擅长的类型<br>
    <input type="text" class="form-control" id="youkinds" 	 placeholder="擅长类型">
    			<ul id="allli" onclick="choose_kinds()">
    <li><button type="button" class="btn btn-default" style="background-color: white">合同纠纷</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">借贷纠纷</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">劳动纠纷</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">刑事辩护</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">交通事故</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">房产纠纷</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">建筑工程</button></li>
    <li><button type="button" class="btn btn-default" style="background-color: white">离婚纠纷</button></li>
    </ul>
    		</div>
    	</div>

--------------------

### ***js代码*** ###

//1-3个类型
    function choose_kinds(){
    	 $("#allli li button").click(function(){
    		 //如果背景颜色是白色的就变成把红色或者深蓝色，如果背景颜色是深蓝色的就变成白色
    		 var rgb = $(this).css('background-color'); 
    		 if(rgb=="rgb(255, 255, 255)"){
    			 $(this).css({'background-color' : '#337ab7'});
    		 }else{
    			 $(this).css({'background-color' : 'white'}); 
    		 }
    		//如果背景颜色是白色的就变成把红色或者深蓝色，如果背景颜色是深蓝色的就变成白色
    		 var str='';
    		 //循环遍历，背景颜色不是白色的，都添加进来
    			   var btn=$("#allli li button");//获取所有的li元素
    				for (var i = 0; i < btn.length; i++) {
    				var gb=btn[i].style.backgroundColor;
    					if(gb=="rgb(51, 122, 183)"){
    						str=str+btn[i].innerHTML+";";
    						
    					}
    				}
    				//添加元素
    				$("#youkinds").val(str);
    			           			              }) 
    }
    //1-3类型

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220220/c0ec3aa8f8ab489294bc964aeeb5d3a7.png