如何爲以下問題編寫jQuery？

Question

我需要幫助我是jQuery的新手，我想在我的一個網頁中實現jQuery。 我也有一個窗體有四個文本框。我有兩個div標籤之一，另一個即我的代碼結構是按以下方式

<div> 
    <div> 
     <img> 
     <img> 
     <img> 
     <img> 
    </div> 
<div> 

我只是想用jQuery的幫助，

1. 在文件準備第一張圖片應該是可見出盡的四個<img>和其餘三個<img>應該隱藏在內部div標記和集中在第一個文本框上的光標之間。
2. 現在當焦​​點聚集到第二個文本框時，當前可見的<img>應該隱藏，只有第二個<img>應該可見。
3. 當焦點聚集到第三個文本框時，當前可見的<img>應該隱藏，只有第三個應該可見。
4. 這樣第四個<img>應該是可見的，當控制轉到第四個文本框時。

整體而言，當焦點轉到任何文本框時，與其相關的<img>應該是可見的，其餘三個<img>應該被隱藏。

因此，請幫助做上述jQuery代碼，除了上面提到的映像外，在執行以下功能時不會影響同一頁上的其他圖像。

等待你的回覆，夥計們！

Answer 1

試試像我一樣here。

---

第一張圖片（twitter）不會根據您的要求更改。受影響的唯一圖像是在具有類sample

HTML

<img src="https://s3.amazonaws.com/twitter_production/a/1265328866/images/twitter_logo_header.png"/> 

<input type="text"/> 
<input type="text"/> 
<input type="text"/> 
<input type="text"/> 

<div class="sample"> 
    <img src="http://sstatic.net/so/img/logo.png"> 
    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"> 
    <img src="http://cacm.acm.org/images/logo.ACM.gif"> 
    <img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png"> 
</div> 

的JavaScript

$(function() { 
    var textboxes = $("input:text"), //gets all the textboxes   
     images = $(".sample img"); //gets all the images 

    images.not(":first").hide(); //hide all of them except the first one 
    textboxes.each(function (i) { 
     var j = i; 
     $(this).focus(function() { 
      images.hide().eq(j).show(); 
     }); 
    }); 
}); 

Answer 2

的HTML可能是這樣的：

<div> 
    <textarea class="first"></textarea> 
    <textarea class="second"></textarea> 
    <textarea class="third"></textarea> 
    <textarea class="forth"></textarea> 
</div> 
<div class="images"> 
    <div> 
     <img class="first" src=".." /> 
     <img class="second" src=".." /> 
     <img class="third" src=".." /> 
     <img class="forth" src=".." /> 
    </div> 
</div> 

和jQuery的：

$(document).ready(function() { 
    $(".images img").hide(); 
    $("img.first").show(); 
    $("textarea").focus(function() { 
     $(".image img").hide(); 
     $("img."+$(this).attr("class")).show(); 
    }); 
}) 

與問題將是，你不能其他類的文本域和圖像。如果你是在需要這樣做，你就必須檢查是否有某一類像

if ($(this).hasClass("first")) { 
    $("img.first").show(); 
} else if ...