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

このようなものが役立つかもしれません-

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

次のコードは、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) {
    $('#img' + id).show().siblings().hide();
 }
于 2012-12-07T11:52:27.480 に答える