How can i write jQuery for below problem?

Question

Hi Friends!

I need help I am new to jQuery and i want to implement jQuery in one of my webpage. I also have one form having four text boxes. I have two div tags one in another i.e. my code structure is in following way

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

I just want to do with the help of jquery that

1. On document ready the first img should be visible out of the four <img> and rest of the three <img> should be hidden between the inner div tag and the cursor focused on first textbox.
2. Now when focus gose to second textbox the current visible <img> should get hidden and only second <img> should be visible.
3. When focus gose to third textbox the current visible <img> should get hidden and only third should be visible.
4. In this way the fourth <img> should be visible when control goes to fourth text box.

Overall when focus goes to any of the textbox the <img> related to it should be visible and the remaining three <img> should be hidden.

So please help in doing above jQuery code which do the following functionality with out affecting other images on the same page except the imaged mentioned above.

Waiting for your reply, guys!

Answer 1

The html could be something like this:

<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>

and the jquery:

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

the problem with that would be, that you cannot other classes to the textareas and images. If you are in the need to do so, you would have to check for a certain class like

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

Answer 2

Try something like I did here.

---

The first image (twitter) does not change, as per your requirements. The only images that are affected are the ones in the div that has the class sample

HTML

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

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

<div class="sample">
  <img src="http://sstatic.net/so/img/logo.png"&gt;
  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"&gt;
  <img src="http://cacm.acm.org/images/logo.ACM.gif"&gt;
  <img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png"&gt;
</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();
        });
    });
});