点击多次每次实现不一样的的效果
$(function(){
var count=1;
$(".btn").click(function(){
count++;
if(count%2==0){
alert("第一个点击");
} else{
alert("第二个点击");
}
})
})
toggle()
方法绑定多个 点击事件 :当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
$("button").toggle(
function(){ //事件1:第一次点击
$("body").css("background-color","green");
},
function(){ //事件2:第二次点击
$("body").css("background-color","red");
},
function(){ //事件3:第三次点击
$("body").css("background-color","yellow");
}
);
点击一次实现多个不同的效果
on()
方法绑定多个事件(这个事件不一定是点击事件与toggle()的用法还是有区别的)
$('.wrap').on({
click:function(){ //事件1:点击事件
......
},
keydown:function() { //事件2:鼠标按下
......
},
keyup:function(){ //事件3:鼠标抬起
......
}
通过添加属性来操作元素
<table>
<thead>
<tr>
<td>订单</td>
<td>操作</td>
</tr>
</thead>
<tbody id="name-tbody">
<tr>
<td>1号订单</td>
<td>
<span>编辑</span>
<span class="deleteelement" data-toggle="modal" data-target="#sure-cancel">删除</span>
</td>
</tr>
<tr>
<td>2号订单</td>
<td>
<span>编辑</span>
<span class="deleteelement" data-toggle="modal" data-target="#sure-cancel">删除</span>
</td>
</tr>
<tr>
<td>3号订单</td>
<td>
<span>编辑</span>
<span class="deleteelement" data-toggle="modal" data-target="#sure-cancel">删除</span>
</td>
</tr>
</tbody>
</table>
//模态框
<div id="sure-cancel" class="modal fade" tabindex="-1" style="display: none">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<div><span class="zfs-16">您确定要删除吗?</span></div>
</div>
<div class="modal-footer justify-content-center">
<button data-dismiss="modal" id="delete-sure">确定</button>
<button data-dismiss="modal" id="delete-cancel">取消</button>
</div>
</div>
</div>
</div>
//jQuery方法
<script>
$(function(){
$("#name-tbody").on("click",".deleteelement",function(){
$(this).parent().parent().addClass("willdelete");
$("#delete-sure").on("click",function(){
$(".willdelete").remove();
});
$(this).parent().parent().siblings().removeClass("willdelete");
})
});
</script>
点击select >中的option切换对应事件(用change而不用click)
<select class="form-control" id="selectthing">
<option value="thing-1"></option>
<option value="thing-2"></option>
<option value="thing-3"></option>
</select>
jQuery方法
方法一
$(function(){
$("#selectthing").on("change",function(){
if($("option:selected",this).val()=="thing-1"){
alert("这是第一个事件");
}else if($("option:selected",this).val()=="thing-2"){
alert("这是第二个事件");
}else if($("option:selected",this).val()=="thing-3"){
alert("这是第三个事件");
}
})
})
方法二
$(function(){
$("#selectthing").on("change",function(){
if($("option:selected",this).index()==0){
alert("这是第一个事件");
}else if($("option:selected",this).index()==2){
alert("这是第二个事件");
}else if($("option:selected",this).index()==3){
alert("这是第三个事件");
}
})
})