Jquery Focus問題

-1

我有下面的代碼，希望有一個通用的函數，如果可能的話。當需要發生的時候，頂部的標籤需要改變顏色。我有一個背後的顏色漸變，所以我需要使用透明的PNG的角落。佈局寬度必須是液體，所以我不能真正改變HTML太much.`Jquery Focus問題

<div class="inputBody"> 
<div class="inputtop"><span class="inputtoptext">Username</span></div> 
<div><input type="text" size="25"></div>` 
</div> 

<script> 
$('input').focus(function() { 
    $(this).addClass("yellowinput"); 

}); 

$('input').blur(function() { 
    $(this).removeClass("yellowinput"); 
}); 
</script>

來源

2012-03-14 David Nuckols

這是什麼問題？它不起作用嗎？你得到什麼錯誤？ – ManseUK 2012-03-14 21:35:04

請**想象一下，你是別人正在閱讀你的問題**，你知道那個人問什麼？ – gdoron 2012-03-14 21:39:17

我要求將背景更改爲輸入上方的文本。我已經重新格式化並使其更易於閱讀。當你加載頁面「inputtoptext」有一個藍色的背景。我想在點擊文本輸入框時將其更改爲黃色。 – 2012-03-15 20:20:23

你可以製作一個這樣的單元上的一段代碼。所有相關的id值都會更改爲類名稱，並將整個片段放入容器中。這可以讓我們以相對於導致事件的對象的通用方式查找與此輸入容器關聯的對象。

<div class="inputContainer"> 
    <span class="orderlabel-left"> 
     <img src="resources/images/labelbackground-left.png" class="leftsidecorneruser"> 
    </span> 
    <span class="orderlabel orderlabelcommon">Username</span> 
    <span class="orderlabel-right"> 
     <img src="resources/images/labelbackground-right.png" class="rightsidecorneruser"> 
    </span> 
    <div> 
     <input type="text" value="" name="" class="orderinput" size="40" tabindex="1" id="user"> 
    </div> 
</div> 


$('input').focus(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/yellowleft.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/yellowright.png"); 
    container.find(".orderlabelcommon").removeClass("orderlabel").addClass("yellowbackground"); 
}); 
$('input').blur(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/labelbackground-left.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/labelbackground-right.png"); 
    container.find(".orderlabelcommon").addClass("orderlabel").removeClass("yellowbackground"); 
});

僅供參考，不同的方法會少了很多代碼來完成，並大多采用CSS規則是這樣的：

$('input').focus(function() { 
    $(this).closest("inputContainer").addClass("hasFocus"); 
}); 

$('input').blur(function() { 
    $(this).closest("inputContainer").removeClass("hasFocus"); 
});

然後，你只會讓你的所有CSS規則，但這取決於是否一個對象是否有父級CSS類.hasFocus。圖像將不得不變成背景圖像，但它們甚至可以在CSS中完成。

來源

2012-03-14 21:40:52 jfriend00

工作。我以前從未使用過最接近的功能。 – 2012-03-15 20:37:35

@DavidNuckols - 因爲你在stackoverflow上是新手，你是否意識到，當你問一個問題時，你回饋社區的方式是，你通過點擊左邊的複選標記來告訴社區哪個答案最好地回答了你的問題的答案？這也將爲你贏得一些聲望點，最終讓你在這裏擁有其他特權。 – jfriend00 2012-03-15 20:56:58

-1

你真的應該等待DOM是準備建立事件處理程序之前：

<script type="text/javascript"> 
    $(document).ready(function() { 
     // your code here 
    }); 
</script>

我不知道這是否能解決您的問題（正如其他人指出的那樣，問題並不清楚），但這是一個很好的做法。您還應該將script -tag放在<head>-標籤之間。

來源

2012-03-14 21:40:27 Christoffer

看起來他的腳本在'body'的底部，所以沒關係。 – gdoron 2012-03-14 21:41:18

如果javascript代碼實際位於文件中的DOM元素之後，則這不是必需的。 – jfriend00 2012-03-14 21:41:38

剛剛編輯我的評論注意，這只是通常的做法。 – Christoffer 2012-03-14 21:42:08

Jquery Focus問題

回答

相關問題