鋒利的JQuery一書中對toggle方法的講解停留在1.9版本以前，現在這個方法已經刪除了切換綁定事件的用途，于是我想嘗試一下幾種不同的替代方法：<style>
div:nth-of-type(1){ width: 200px; height: 200px; background-color: aqua; float: left; display: block;
} div:nth-of-type(2){ width: 200px; height: 200px; background-color: tomato; margin-left: 200px;
} </style></head><body>
<div id="show-box"></div>
<div id="fade-box"></div>
<script>
$(function(){
$("#show-box").click(function(){ if($("#show-box").css("display")=="block"){//is(":hidden")
$(this).hide(300);
}else{
$(this).show(300);
}
}); var i = 0;
$("#fade-box").click(function(){ if(i == 0){
$(this).fadeOut(300);
i = 1;
}else if(i == 1){
$(this).fadeIn(300);
i = 0;
} console.log(i);
})
}) </script>兩種方法都無法工作：都是只能消失而不能再次出現，想請問一下各位大佬是哪里出了問題...已經查閱了一些博文，用的也多是這兩種方法...
2 回答
holdtom
TA貢獻1805條經驗 獲得超10個贊
第一種方法里，
.css()這個方法主要是針對行內樣式的操作（執行存在不確定性），并且，display在非block值的情況下也可能是非隱藏的狀態（另外多說一句，.show()和.hide()這對方法，會緩存display原來的值，所以就不會出現非block元素被block這樣的事），所以不建議這樣用第二種方法思路可以，但DOM相關的變量（尤其是狀態），建議你用
data-xxxx這樣的屬性放在元素里，這樣你事件回調里直接$(this).data('xxxx')就能取到屬性，還可以避免變量沖突和作用域之類的問題。data相關的API查文檔吧，比如>這里<這個就挺方便。鋒利那本書太老了，個人不太推薦。
- 2 回答
- 0 關注
- 538 瀏覽
添加回答
舉報
0/150
提交
取消