jquery slideToggleは必要なdivの代わりにすべてのdivを開きます

Question

私は<div>の変数番号を持つことができるページを持っています。人々は<img>のimgにリンクされている+シンボルをクリックできますタグが表示されます。

私は現在持っている：

PHP/HTMLを

$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">'; 

$table .= '<div>'.$plus.'</div>'; 
$hidden .= '<div class"diary">-Content-</div>'; 

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $(".clickme").click(function() { 
     $(".diary").slideToggle("slow", function() { 
     }); 
    }); 
}); 
</script> 

これは明らかに、すべてのdivはなくクリックされるだけのものを開きます。私はここに他の同様の質問を見てきたとのようなバリエーションの数試してみました：私はそれだけで完全に機能を停止し、これらをしようとすると、しかし

$(document).ready(function(){ 
    $(".clickme").click(function(){ 
     $(this).next(".diary").toggle(); 
     }); 
}); 

を。つまり、divのいずれも上または下にスライドしません。私はJSフィドルでの例を参照してくださいが、私は私のページにそれを適用するとすぐに何も得られません。 私は、実際には何かをしていないのですが、何も見えません。助けていただきありがとうございます。

は、HTML出力が

<div> 
    <div> 
     <table> 
      <img class="clickme"> 
     </table> 
    </div> 
    <div class="diary"> 
     <table> content </table> 
    </div> 
<div> 

Answer 1

のようになります。両方の要素で

<div>test toggle 
    <div class="clickme" data-index="1">click me</div> 
    <div class="toggle" id="obj_1">toggled field</div> 
</div> 

、その後に一致するインデックスを持つ属性を追加することです ベストな方法を（THT HTMLに基づいて提供しました） JQuery：

 $(function() { 
      $(".clickme").click(function() { 
       //get number from clicked element's attribute 
       var index =$(this).attr('data-index'); 
       //select element with id that matches index and toggle 
       $('#obj_'+index).toggle(); 
      }); 
     }) 

Answer 2

コードを確認した後、 e slideToggleの呼び出しはおそらく各要素に適用される.diaryクラスで行われます。

$ plus divの中に日記divを入れて、jqueryの子を使うか、.diary divに一意のIDを与え、 の切り替えにid属性を使用することをお勧めします。

EDIT：

<div class="clickme"> <div class="diary">CONTENT HERE</div> </div>

はCSSでこれを追加します：

.clickme { background: url('images/plus.png') no-repeat top left; min-width: 20px; min-height: 20px; cursor: pointer; }

スクリプトタグ：

ここ

は、単純なHTML出力であります

<script> $(function() { $(".clickme").click(function() { $(this).children().slideToggle("slow"); }); }); </script>

あなたの使い方やスタイリングの目的で、私は日記のクラスを許可しますが、どこにも使用されていないことに注意してください。