I have this code that generates a group ID with javascript. It's shown here: /. Now instead of it writing the text "Group id : X", I want it to control an image that gets shown. There are 7 group id's and 7 images

    <div data-role="content" id="pictures"> 
        <img src="images/image1.jpg" alt="image" id="pict1">
        <img src="images/image2.jpg" alt="image" id="pict2">    
        <img src="images/image3.jpg" alt="image" id="pict3">    
        <img src="images/image4.jpg" alt="image" id="pict4">    
        <img src="images/image5.jpg" alt="image" id="pict5">    
        <img src="images/image6.jpg" alt="image" id="pict6">    
        <img src="images/image7.jpg" alt="image" id="pict7">    
    </div>

Now when the group id is 5, I want the 'Continue' button to hide images 1, 2, 3, 4, 6 and 7 and show image 5. I was thinking of doing something like

    function show_img(id)
    {
        if(id=='1')
        {
           $("#pict1").hide();
           $("#pict2").show();
        }
        else if(id=='2')
        {
            $("#pict2").show();
            $("#pict1").hide();
        }
    return false;
     } 

But that would result in a lot of retyping and I'm not really sure how to get it to work. So, does anyone know how I can get the generated group ID to show the right image when the button is clicked?

I have this code that generates a group ID with javascript. It's shown here: http://jsfiddle/LwtvK/5/. Now instead of it writing the text "Group id : X", I want it to control an image that gets shown. There are 7 group id's and 7 images

    <div data-role="content" id="pictures"> 
        <img src="images/image1.jpg" alt="image" id="pict1">
        <img src="images/image2.jpg" alt="image" id="pict2">    
        <img src="images/image3.jpg" alt="image" id="pict3">    
        <img src="images/image4.jpg" alt="image" id="pict4">    
        <img src="images/image5.jpg" alt="image" id="pict5">    
        <img src="images/image6.jpg" alt="image" id="pict6">    
        <img src="images/image7.jpg" alt="image" id="pict7">    
    </div>

Now when the group id is 5, I want the 'Continue' button to hide images 1, 2, 3, 4, 6 and 7 and show image 5. I was thinking of doing something like

    function show_img(id)
    {
        if(id=='1')
        {
           $("#pict1").hide();
           $("#pict2").show();
        }
        else if(id=='2')
        {
            $("#pict2").show();
            $("#pict1").hide();
        }
    return false;
     } 

But that would result in a lot of retyping and I'm not really sure how to get it to work. So, does anyone know how I can get the generated group ID to show the right image when the button is clicked?

• javascript
• jquery

• 3 In your markup there is an extra img: <img src="images/image1.jpg" alt="image" img id="img1"> – Toni Toni Chopper Commented Dec 7, 2012 at 11:47
• Thanks. Corrected it. Also I changed the image id's to 'pictX' from 'imgX' to avoid confusion. – wortle Commented Dec 7, 2012 at 12:03

4 Answers 4

You could hide all (using some general selector) and then show just the one you need. E.g.

function show_img(id) {
    // hide every image that is immediate child of node with "pictures" id
    $('#pictures > img').hide();
    $('#pict'+id).show();
}

Something like this might be useful -

function show_img(id)
{
  // hide all other images (possibly only within a certain parent element)
  $("#parent_selector > img").hide();

  // display only specified image by id
  $("#img"+id).show();
  return false;
}

The following code will hide all images with an id starting img then show the one with the id passed in:

function show_img(id)
{
    $('img[id^="img"]').hide();
    $('#img' + id).show();
} 

http://jsfiddle/3U96T/1/

I'd suggest (though untested):

 function show_img(id) {
    $('#img' + id).show().siblings().hide();
 }