通過鏈接鼠標事件來簡化jQuery

我寫了三個jQuery函數來定位span：一個用於點擊span，一個用於製表span，另一個用於製表/點擊span。由於這是很多jQuery，如果可能的話，我想將它結合起來。所以我想知道是否有人能幫我找出最好的方法。通過鏈接鼠標事件來簡化jQuery

關注點擊：

$(function(){ 
    $("span#wanttobe").click(function(){ 
    $("span#wanttobe input").focus(); 
    $(this).css({ 
     "border":"1px solid #4D79FF", 
     "outline":"none", 
     "-webkit-box-shadow": "0 0 4px #4D79FF", 
     "-moz-box-shadow": "0 0 4px #4D79FF", 
     "box-shadow": "0 0 4px #4D79FF", 
     "border-radius": "3px", 
     "-moz-border-radius": "3px", 
     "-webkit-border-radius": "3px"}); 
    }); 
});

聚焦標籤：

$(function(){ 
    $("span#wanttobe").focusin(function(){ 
    $("span#wanttobe input").focus(); 
    $(this).css({ 
     "border":"1px solid #4D79FF", 
     "outline":"none", 
     "-webkit-box-shadow": "0 0 4px #4D79FF", 
     "-moz-box-shadow": "0 0 4px #4D79FF", 
     "box-shadow": "0 0 4px #4D79FF", 
     "border-radius": "3px", 
     "-moz-border-radius": "3px", 
     "-webkit-border-radius": "3px"}); 
    }); 
});

重點指出：

$(function(){ 
    $("span#wanttobe").focusout(function(){ 
    $(this).css({ 
     "background": "#fff", 
     "border": "1px solid #CCD9FF", 
     "border-radius": "3px 3px", 
     "-moz-border-radius": "3px 3px", 
     "-webkit-border-radius": "3px 3px", 
     "-moz-box-shadow": "inset 0 1px 2px rgba(0,0,0,.60)", 
     "-webkit-box-shadow": "inset 0 1px 2px rgba(0,0,0,.60)", 
     "box-shadow": "inset 0 1px 2px rgba(0,0,0,.60)"}); 
    }); 
});

來源

2011-11-29 tvalent2

通過在樣式表中定義一個類來正確使用CSS，並使用'addClass' /'removeClass'。 – zzzzBov

我應該說我嘗試過，但它沒有正常工作。可能是我的語法。 – tvalent2

確保你用'addClass' /'removeClass'（即'addClass（'foo'）'，而不是'addClass（'。foo''''）排除期限。 – zzzzBov

更改click()至on('click focusin focusout')。

這將一次綁定三個事件。

來源

2011-11-29 05:47:04 alex

通過鏈接鼠標事件來簡化jQuery

回答

相關問題