jq基本事件，点击事件，路由跳转传值，select选择框

jq点击事件

前提条件

引入js

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

一.点击事件 来回切换左边弹出框

html部分·

<div class="menu-box">
        <span class="slider">
            [外链图片转存失败(img-YinUUgxX-1562057685871)(https://mp.csdn.net/mdeditor/images/rightButton.png)]
        </span>
        <ul class="menu" id="menu">
          <li class="meLi menu_li"><a href="index.html" id="nameTit">浙江省财政支农资金</a></li>
          <li><a href="xm.html">畜牧业转型升级</a></li>
          <li>现代农业园区建设</li>
          <li>历史文化村落保护</li>
          <li>专业扶贫</li>
          <li>渔业转型升级</li>
          <li>农业绿色发展</li>
        </ul>
    </div>

js部分·

var bOk = true;
	$('.slider').on("click", function() {
	if(bOk) {
      $(".menu").css('display','block');  //     $(".menu").hide()
      $(this).find('img').attr('src', 'images/leftButton.png');
		} else {
      $(".menu").css('display','none');
			$(this).find('img').attr('src', 'images/rightButton.png')
		}
		bOk = !bOk;
  })

二.a标签跳转、点击传值，类似于vue路由跳转

需要跳转 传值页面 ，js部分（index.html）

$(function(){

	$(".meLi").click(function(){
        //jq 路径传参
        var nameTit = $(this).text();
        var meLi = $(this).attr("id");

        url = "xm.html?nameTit="+nameTit+"&meLi="+meLi;//此处拼接内容
        window.location.href = url;
      })

  var app = 'http://localhost:8088' //nginx,反向代理 本地localhost
  //左边弹框事件接口
  function LeftTkApi(id){
    $.ajax({
      type:"get",
      url: app+"/capita/largeScreenData/getFundsTypeInfo",
      success:function(res){
        let dataList = res.result;
        var LiLeftHtml = '<li class="meLi menu_li"><a href="index.html" id="nameTit">浙江省财政支农资金</a></li>';
        for(var i=0;i<dataList.length;i++){
          LiLeftHtml+='<li class="meLi" id='+ dataList[i].code +'><a id="nameTit">' + dataList[i].name + '</a></li>'
        }
        $("#menu").html(LiLeftHtml);
      }
    })
  }
  LeftTkApi(id)


  })

接收参数值页面 ，js部分（xm.html）

$(function() {
    //页面跳转取值
    let url =  window.location.href;
       let data =  url.split("?")[1].split("=");
       let title =  data[1].split("&")[0];  //标题
       title = decodeURIComponent(title) //中文字符 解码
       var moneyId = data[2];  //资金类别代码
       $("#nameTit").text(title)
 })

三.只能点击一次，添加样式

$(".rightBtn").on("click",function(res){
	$(this).addClass("right_hover").siblings().removeClass("right_hover");//点击添加样式
	
	$(".selectX").one("click",function(){//第一次点击才有效
       $(".tkbingPic3").hide();
       $(".tkbingPic1").show();
       //各专项形象进度 县级
       var xxData = true;
       TKoneyCity(id,code,xxData)
     })
})

四.select标签 选择，拿值 —— 多个select框 实现绑定

html部分

	<select class="right_all selectProR" id="selectProR">
      <!-- <option value="000000">浙江省</option>
      <option value="100100" selected = "selected">杭州市</option>   //默认选中杭州市
      <option value="1001001">绍兴市</option> -->
    </select>

	//省 市
  $("#selectProR").change(function(){
    var id = $('#selectProR option:selected').val();
    var Tcity = $('#selectProR option:selected').html();
    // $(".centerT").html(Tcity);
    ProjectS(id,CityCode,ProjectSTrue)
  });


  //多个select框 实现绑定
  //市一级大屏
  $("#rightCity").change(function(){
    var locId = City = $('#rightCity option:selected').val();  //省市地区id
    var Tcity = $('#rightCity option:selected').html();    //文本省市
    $(".titileTxt").html(Tcity + '财政支农资金')

    $("#selectProR").find("option:contains("+Tcity+")").attr("selected",true);//项目数量省市同步

    $("#XselectX").find("option:contains("+Tcity+")").attr("selected",true);//立项资金

    var lXMoney =true;
    mgCity(locId,lXMoney); 

    
  });

#########################  接口返回的value值来动态选中相对应选项。
$.ajax({
        url:"post.php",   //1.从数据库获取相对应的value值,一般登录状态下对应的用户名都存了session
        //async:false,
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            $("#sex option[value='']").removeAttr("selected");  
            //2.移除默认选项的选中状态  removeAttr("selected")
            $("#sex option[value='"+data+"']").attr("selected","selected");  
            //3.根据ajax返回的value值来动态选中相对应选项。
  
        }    
    })

默认选中第一个框

//addClass   默认选中第一个框
function addClass(index){ 
  $('.a-pic'   + index ).find('.a-sel li').removeClass("a-active");
  $($('.a-pic'   + index).find('.a-sel  li')[0]).addClass("a-active")
  // $('.a-pic'   + index).find('.a-sel  li')[0].className = "a-selLi a-active"
}

var month = 08;
$($(".a-monthUl").find('li')[month - 1]).addClass("a-activeLi");

五.同一个div绑定多个事件，请求叠加bug

当一个div绑定多个事件 或 不同弹框绑定同一个div
总之就是 多个点击Click 绑定 同一个元素上

bug：点击多次接口次数叠加问题

解决方案：解绑（off）———— 代码如下

    var bok = true;
      if(lastCity == "省"){
          
          $(".selectX").off("click"); //解绑————问题解决的关键
            
          $(".selectX").on("click",function(){            
            $(".tkbingPic").hide();
            if(bok){
              moneyCityTk(xx,xx);      //调用事件一
              $(".selectX ").text("各市详情")
            }else{
              CityTk(xx,xx);     //调用事件二
              $(".selectX ").text("区县详情")
            }

            bok = !bok;
           
          })
    }

拿着 不谢 请叫我“锤” 谢谢！！！