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

你可以隐藏所有（使用一些常规选择器），然后只显示你需要的那个。 E.g。

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

Answer 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;
}

Answer 3

以下代码将隐藏ID为img的所有图片，然后显示传入了ID的图片：

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

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

Answer 4

我建议（虽然未经测试）：

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

按生成的ID显示隐藏图像

4 个答案: