javascript - 通过生成的 id 显示隐藏图像

Question

我有这段代码可以用 javascript 生成组 ID。此处显示:http://jsfiddle.net/LwtvK/5/ .现在，与其编写文本“Group id : X”，不如让它控制显示的图像。有7组id和7张图片

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

现在，当组 ID 为 5 时，我希望“继续”按钮隐藏图像 1、2、3、4、6 和 7 并显示图像 5。我正在考虑做类似的事情

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

但这会导致大量的重新输入，我不确定如何让它工作。那么，有谁知道如何让生成的组 ID 在单击按钮时显示正确的图像？

Answer 1

您可以隐藏所有(使用一些通用选择器)然后只显示您需要的那个。例如

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