how to do following task using jQuery?

Question

The following code is given by one of user and friend on stackoverflow as solution for my problem. HTML Code

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

JQUERY Code

$(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();
        });
    });
});

The above code shows image related to text box which has focus and hides rest of the all three images at the same time.

The above process goes on sequentially that is for first text box first image is visible, for second text box send image is visible in this way. Now the problem is I want to show 1. when focus comes to first text box first image is visible 2. When focus comes to second text box second image is visible 3. when focus comes to third text box i want the second image as it is visible in this way after 4 and fifth text box when sixth text box comes again the third image should be visible.

QUE 1. Is it possible to show the image as i want but using loop as in above code and identifying the text box using jquery? or i have to write seperate functions for each text box?

There is not only the text boxes but also group of radio buttons, select boxes, and group of check boxes too in between text boxes so when focus comes to these radio buttons or select boxes or check boxes the related image to them should get visible. so

Que 2. How can I distinguish between the images for above controle ?

Que 3. what following line will do in the code and How its get executed means which function is executed first then which second in this way? images.hide().eq(j).show();

Please reply for above questions as in depth as you can because i am new to jquery. and i want to know how it works Thank You

Answer 1

I'm having a hard time understanding what you say, but if i understood correctly, you have a series of inputs (input, select, textarea...) matching a series of images. You want to control the show/hide behaviour of images according to which input has focus.

The way you can solve this is in the relation you set programmatically in the DOM between the images and the inputs. Right now, you use the order of appearance for that. It can work but you'll have to remember in six-months during maintenance to respect that invisible rule.

Therefore I would propose another option, more semantic and readable: using classes and ids. Inputs and images having to go together would share a common identificator number (ex: <input id="input-5" type="text"/> for your inputs, <img id="image-5" src="path.jpg"/> for your images, and then reconstruct the selector in your each() function, using the identification number.

The jquery would be something in the likes:

$(function () {

$('.image').hide();

$('input').focus(function(){
  var parts= $(this).attr('id').split('-');
  var uId = parts[1];
  alert(uId);
  // now, find the right image to show
  $('.image').hide();
  $('#image-'+uId).show();

});
});

You can see a live example here (you can play with it here).

Tell me if i'm on the right track or if i completely misunderstood your need. If i'm on the right track, we will be able to solve your remaining issues by completing this logic.