1

ページに複数の製品があり、すべてデータベースから取り込まれています。それぞれの下に、コメント ボタンをクリックして表示および非表示にするコメント ボックスがあります。

私のJavascript：

$(document).ready(function(){

    $("#product-box div#product-comment-box").hide();
    //$("#product-box div.comment").show();

$("#product-box div.comment").click(function(){
    $("li div#product-comment-box").toggle();
});

製品エリアの私の HTML:

<li><div id="product-box">
    <div id="product-image"><a href="#"><img src="images/image_2.jpg"></a></div>
    <div id="product-controls">
        <a href="#"><div id="button" class="more"><p>More</p></div></a>
        <a href="#"><div id="button" class="add"><p>Add</p></div></a>
        <div id="button" class="comment"><p>Comment</p></div>
        <a href="#"><div id="button" class="like"><p>Like</p></div></a>
    </div>
    <p>Product Name</p>
    <div id="product-comment-box">Comment</div>
    </div></li>

しかし、これはすべての製品のすべてのコメント ボックスを切り替えることに成功しています。next と nextAll を使用してみましたが、うまくいきませんでした。

ありがとう

4

3 に答える 3

3

this現在のコメントを参照するには、 を使用する必要があります。セレクターが何をしているかを覚えておいて、一致する DOM のすべてを取得してください。

$("#product-box div.comment").click(function(){
    $(this).closest('li').find('div#product-comment-box').toggle();
});

IDで選択するのは良い考えではないようですが。そのdivにクラスを与えて、代わりにそれを選択してみてください。

//Change
<div id="product-comment-box">Comment</div>

//To
<div class="product-comment-box">Comment</div>  

//then select using class instead.
$("#product-box div.comment").click(function(){
    $(this).closest('li').find('div.product-comment-box').toggle();
});
于 2012-04-17T02:32:28.623 に答える
0

you can also try this way ... pass the id in divid like 

              <div id="comment<?php echo "Your db id" ?>" class="show_to_public">

              </div>
              <div id="product-comment-box<?php echo "Your db id" ?>">

              </div>

so that you can seperate it in your jquery as..

      $('.show_to_public').click(function(e){   
        var id=$(this).attr("id").replace("comment","");
        $('#product-comment-box'+id).toggle();
      });
于 2012-04-17T03:11:42.293 に答える
0

クリック ハンドラー内で、thisキーワードはクリックした要素を参照します。

ドキュメントから：

上記のように、handler パラメーターはコールバック関数を受け取ります。ハンドラー内で、キーワード this は、ハンドラーがバインドされている DOM 要素を参照します。jQuery で要素を利用するには、通常の $() 関数に渡すことができます。例えば：

$('#foo').bind('click', function() {
  alert($(this).text());
});

探している要素を見つけるには、その要素を利用する必要があります。あなたの例では、次のようなものが機能します。

$(this).closest('li').find('.product-comment-box')

...ほとんど。ID の代わりに「product-comment-box」というクラスを使用していることに注意してください。これは、ID が一意の要素のみを対象としており、複数の要素で使用されることは決してないためです。したがって、重複するすべての ID をクラスに置き換えたいと思うでしょう。「id」を「class」に置き換えるだけで、ボタンを除いて、使用したスニペットで機能するはずです。ボタンには既にクラスがあるためです。それらについては、クラスをスペースで区切ることができます：

<div class="button like">...
于 2012-04-17T03:15:13.337 に答える