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 = '浙江省财政支农资金 ';
for(var i=0;i<dataList.length;i++){
LiLeftHtml+='' + dataList[i].name + ''
}
$("#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">
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;
})
}