如何为下面的问题编写jQuery？

Question

我需要帮助，我是jQuery的新手，我想在我的网页中实现jQuery。我还有一个表格，有四个文本框。我有两个div标记，一个在另一个，即我的代码结构是这样的

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

我只想在jquery的帮助下

1. 在文档就绪时，第一个img应该在四个<img>中可见，三个<img>的其余部分应该隐藏在内部div标记和聚焦在第一个文本框上的光标之间。
2. 现在，当焦点切换到第二个文本框时，当前可见的<img>应该被隐藏，而只有第二个<img>应该是可见的。
3. 当焦点切换到第三个文本框时，当前可见的<img>应该被隐藏，只有第三个应该是可见的。
4. 这样，当控件转到第四个文本框时，第四个<img>应该是可见的。

总的来说，当焦点转移到任何文本框时，与其相关的<img>应该是可见的，其余的三个<img>应该是隐藏的。

因此，请帮助做上面的jQuery代码，它做了以下功能，除了上面提到的图像之外，其他图像都没有影响到页面上的其他图像。

等着你们的答复，伙计们！

Answer 1

试着像我做的那样这里。

根据您的要求，第一个映像(twitter)不会改变。唯一受影响的映像是div中具有类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 ...