iT邦幫忙

0

jquery單一選擇

以下是我的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樣式,請問我可以怎麼家判斷?

沒人會把css寫到js裡~

2 個回答

0
Homura
iT邦高手 2 級 ‧ 2019-03-21 11:43:04
最佳解答

這個讀一下官方文件就有
.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" });
            })
        )}
    }
}

好的 感謝你

0
浩瀚星空
iT邦高手 1 級 ‧ 2019-03-21 11:21:53

我只想說,這是你從哪邊學來的奇特做法啊。
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控制是根本沒必要的事。

froce iT邦高手 1 級 ‧ 2019-03-21 12:32:18 檢舉

我要發表回答

立即登入回答