1

我有这段代码可以用 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 以显示正确的图像？

4

4 回答 4

6

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

function show_img(id) {
    // hide every image that is immediate child of node with "pictures" id
    $('#pictures > img').hide();
    $('#pict'+id).show();
}
于 2012-12-07T11:46:24.030 回答
2

以下代码将隐藏所有以 id 开头的图像，img然后显示传入 id 的图像：

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

http://jsfiddle.net/3U96T/1/

于 2012-12-07T11:48:00.630 回答
2

像这样的东西可能有用-

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;
}
于 2012-12-07T11:46:25.700 回答
2

我建议（尽管未经测试）：

 function show_img(id) {
    $('#img' + id).show().siblings().hide();
 }
于 2012-12-07T11:52:27.480 回答