以下是我的code
for (var i = 0; i < result.length; i++) {
$("#peopleID>td").append(
$('<td>').text(result[i].ID+". "+result[i].Name)
.data('id',result[i].ID)
.hover(function(){
$(this).css({ "background-color":"#dddddd"});
})
.click(function(){
console.log($(this).data('id'));
$(this).css({ "background-color":"#36648B","color":"red" });
})
)}
}
}
這段code可以做出一半我想要的效果，但有個問題，當我選擇下一個td時，上一個選擇的td必須取消那些css樣式，請問我可以怎麼家判斷?
已邀請的邦友 {{ invite_list.length }}/5
這個讀一下官方文件就有
.hover(handlerIn, handlerOut)有2個參數
一個是hover狀態一個是未hover狀態
所以你新增一個參數就行
for (var i = 0; i < result.length; i++) {
$("#peopleID>td").append(
$('<td>').text(result[i].ID+". "+result[i].Name)
.data('id',result[i].ID)
.hover(function(){
$(this).css({ "background-color":"#dddddd"});
},function(){
$(this).css({ "background-color":"yellow"});
})
.click(function(){
console.log($(this).data('id'));
$(this).css({ "background-color":"#36648B","color":"red" });
})
)}
}
}
我只想說，這是你從哪邊學來的奇特做法啊。
css真的會哭
先問你幾個問題好了
1.你知道css中可以使用:hover的做法嗎?
2.你知道jquery中。有removeClass的快速處理方式嗎?
先了解以上你是否能否知道。後續再看你的需求討論處理
我知道hover呀，只是因為還需要做點擊後傳值(沒把那段寫上來)，所以才寫成這樣，removeClass就沒用過了
這就看你了。一般會寫成用hover事件控制。是因為要做的是其它事情才會需要這樣做，如可能要做移動式動畫或是展開動畫。
但你的hover事件則是只單純做style處理。
這樣子就沒那個必要了。只要用css處理就好了。根本不需要從hover事件來做處理。
我會教你用removeClass。就是正常來說點擊式變色。我一樣會用css來處理。搭配元件式指定
也就是說。我可以先做一個css。如
.sel{background-color:#36648B,color:red}
則用
$("#peopleID > td.sel").removeClass('sel')
$(this).addClass('sel')
上面的方式來處理就好。第一行就是將其對應合集中的.sel移除掉。
再將目前的元件加上sel就行了。
jquery的.hover事件拿來做style控制是根本沒必要的事。
https://wcc723.github.io/css/2016/12/06/css-status/
樣式盡量用CSS處理吧...
iThome鐵人賽
看影片追技術