Jquery toggle（）、hide（）が期待どおりに動作しない

Question

私はDrupal環境でJQueryを使い始めました。

サムネイルをいくつか表示しています。クリックすると、大きな画像が「ビューポート」に表示されます（隠しdivが表示されます）。私がやっていることを達成するより良い方法があるかもしれませんが、私はこのようにする必要があります。

これは私が持っているものです。

$(document).ready(function() { 
    //$('#bigpic1').hide(); //show the first big picture always on page load 
    $('#bigpic2').hide(); 
    $('#bigpic3').hide(); 

$('a#thumb1').click(function() { 
    $('#bigpic2').hide(); $('#bigpic3').hide(); 
    $('#bigpic3').toggle(200); 
    return false; 
    }); 
$('a#thumb2').click(function() { 
    $('#bigpic1').hide(); $('#bigpic3').hide(); 
    $('#bigpic2').toggle(200); 
    return false; 
    }); 
    $('a#thumb3').click(function() { 
    $('#bigpic1').hide(); $('#bigpic2').hide(); 
    $('#bigpic3').toggle(200); 
    return false; 
    }); 

}); 

醜いコードであることに加え、それが正しい動作しません。最初の大きな画像はページが表示されていないときに表示され、さらにサムネイルをクリックすると右のdivが表示されますが、何も表示されません（「ビューポート」では一度に1つの大きな画像しか表示されません）。

私のHTMLはこの

<table><tr> 
    <td><a href="#" mce_href="#" id="thumb1">...thumb1...</td> 
    <td><a href="#" mce_href="#" id="thumb2">...thumb2...</td> 
    <td><a href="#" mce_href="#" id="thumb3">...thumb3...</td> 
</tr> 
<tr><td colspan="3"> 
    <!-- my "viewport" cell --> 
    <!-- the big picture displays here --> 
    <div id="bigpic1">... </div> 
    <div id="bigpic2">...</div> 
    <div id="bigpic3">...</div> 
</td></tr></table> 

Answer 1

のように見える＃セレクタは、IDを選択しますので、そこにタイプする必要はありません。セレクタにはjQueryの優れた機能が搭載されています。 http://api.jquery.com/category/selectors/。

このような一般的な方法を実行することもできます（<に>要素に名前を付ける必要があります）。

<table> 
    <tr> 
     <td> 
      <a href="#" mce_href="#" name="thumb1" id="thumb1">...thumb1...</a> 
     </td> 
     <td> 
      <a href="#" mce_href="#" name="thumb2" id="thumb2">...thumb2...</a> 
     </td> 
     <td> 
      <a href="#" mce_href="#" name="thumb3" id="thumb3">...thumb3...</a> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <!-- my "viewport" cell --> 
      <!-- the big picture displays here --> 
      <div name="bigpic1" id="bigpic1">...1... </div> 
      <div name="bigpic2" id="bigpic2">...2... </div> 
      <div name="bigpic3" id="bigpic3">...3... </div> 
     </td> 
    </tr> 
</table> 

jQueryコード。

//on load 
$(document).ready(function() { 
    $('#bigpic2').hide(); 
    $('#bigpic3').hide(); 

    //this will be run when an element has a name with the text "thumb" in it 
    $('[name*=thumb]').click(function() { 
     //hide all big pictures (loops over every element that has a name with the text "bigpic" in it 
     $('[name*=bigpic]').each(function(index, value) { 
      if ($(this).is(':visible')) { //if the big pic is visible 
       $(this).hide(200); //then hide it 
       return false; //found the visible big pic so no need to keep looping 
      } 
     }); 
     //show the right image 
     $('#bigpic' + $(this).attr('id').replace('thumb', '')).show(200); 
    }); 
});// end on load 

これはコードが少なく、より拡張性があります。画像を追加/削除する場合は、変更する必要はありません。 最初のイメージが表示されているときに、ドキュメントの読み込みに$('#bigpic1').show();を試しましたか？ああ、あなたは関数の値を返す必要はありません。

Answer 2

まず、ビューポートセルをIDまたはクラスで識別すると便利です。私はあなたの文書の残りの部分が設定されているのか分からないが、例えば：

<a class="thumb" href="#" mce_href="#" name="thumb1" id="thumb1"></a> 

：同様に

<td id="viewport-cell" colspan="3"> 
    <div id="bigpic1">...1... </div> 
    ...etc... 
</td> 

は、おそらくあなたは物事を簡単にするために、あなたのサムネイルのリンクにクラスを追加することができます

td#viewport-cell div { /* hide all bigpics */ 
    display: none; 
} 
td#viewport-cell div#bigpic1 { /* but show the first one */ 
    display: block; 
} 

最後に、jQueryを使って：

$(document).ready(function(){ 
    $('table#mytable').find('a.thumb').click(function(e){ 
    e.preventDefault(); // suppress native click 
    var bigpicid = '#bigpic'+ this.id.replace(/^thumb/i,''); 
    $(bigpicid).siblings().hide().end().fadeIn('slow'); 
    }); 
}); 

01あなたの "bigpics" 隠されるため、デフォルトのスタイルを設定します。

ここに例があります：http://jsfiddle.net/redler/SDxwF/