jqueryでクリックしたdivを対象にする

Question

このブロックは、ユニバーサルjQueryコードを使用してそのdivをターゲットにしたい特定のボックスにカーソルを置いたときに表示されます（この例の目的のためにクリックしますが、 div内の画像を非表示にし、新しいdivを表示して幅を250pxにアニメーション化したい。 divの2番目のクラスをターゲットにしようとしていたが、役に立たなかった。誰でも考えがありますか？

$(document).ready(function(){ 
     $('.partner_box').click(function() { 
      var hidden_div; 
      hidden_div = $(this).attr('class').eq(1); 
      //hidden_div = $(hidden_div).eq(1).html(); 

      //hidden_div = hidden_div:nth-child(1); 

      $(hidden_div + ' img').hide(); 
      console.log(hidden_div); 

      //alert(hidden_div); 
      //alert($(hidden_div).attr('class').split(' ')[1]) 

      /*$('.partner_box div').animate({ 
       top: '0px', 
       right: '0px', 
       bottom: '0px', 
       left: '0px', 
       display: 'block', 
       position: 'absolute', 
       width: '200px' 
      });*/ 
     }); 
    }); 

    <div id="partner_grid"> 
     <!--LINE ONE--> 
     <div class="partner_box partner_box1"> 
      <img src="images/partners/asx.jpg" alt="ASX" /> 
      <div style="display:none;"> 
       <p>This is the text for the slide.</p> 
      </div> 
     </div> 
     <div class="partner_box partner_box2"> 
      <img src="images/partners/beauchamp.jpg" /> 
      <div style="display:none;"> 
       <p>This is the text for the slide.</p> 
      </div> 
     </div> 
     <div class="partner_box partner_box3"> 
      <img src="images/partners/decillion_group.jpg" /> 
      <div style="display:none;"> 
       <p>This is the text for the slide.</p> 
      </div> 
     </div> 
     <div class="partner_box partner_box4"> 
      <img src="images/partners/dtcc.jpg" /> 
      <div style="display:none;"> 
       <p>This is the text for the slide.</p> 
      </div> 
     </div> 
    </div> 

Answer 1

私はクラスを効果的に解析できませんでしたので、スライドごとにユニークなIDを作成しました。

$('.partner_box').click(function() { 
    var hidden_div; 
    hidden_div = $(this).attr('id'); 
}); 

ありがとうございました。

Answer 2

しようと変更：

$(hidden_div + ' img').hide(); 

に：あなたは、クラスをターゲットにしているので

$('.' + hidden_div + ' img').hide(); 

、あなたはピリオドを持つクラスを前置きする必要があります。それは除外されているようだ。

Answer 3

こんにちは、私はあなたが達成しようとしていることを完全には分かっていません。子画像を隠して子divを表示する例を次に示します。

$(document).ready(function(){ 
     $('.partner_box').click(function() { 

      var my_image = $(this).find("img"); 
      var hidden_div = $(this).find("div"); 

      my_image.hide(); 
      hidden_div.show(); 


     }); 
    }); 

キーワード「this」は、イベントを発生させた要素に関連付けられています。そのため、イベントを生成しているときにクリックされた.partner-boxクラスのクラスを持つすべてのdivにクリックイベントハンドラをアタッチしています。

Answer 4

$(this)がクリックされた特定の要素を参照するこのようなイベントの中にいるときを覚えておいてください。使用しているセレクタの要素がすべてではありません。

このJSFiddleを見てみましょう：http://jsfiddle.net/ufomammut66/6y9XY/

をあなたが要素をクリックして、コンソールでそれをチェックアウトする場合は、私はそれが$(this)要素を投棄してい気づくでしょう。 FireFoxにFireBugがインストールされている場合、出力の上にマウスを置くと、その場合には$(this)という要素が表示されます。出力要素は、クリックされた要素に特有であることに注意してください。

そこから、必要なアニメーションを行うことができます。