Question

I have this code that generates a group ID with javascript. It’s shown here: http://jsfiddle.net/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?

Answer 1

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