使用Jquery多个值？

Question

I'm trying to display a reply form for each comment but I hide the form using Jquery and I was wondering how can I grab the comment id and add it to Jquery so it can hide each reply form and display the correct reply form correctly instead of displaying the wrong reply form?

For example, form_show_hide1, form_show_hide2, form_show_hide3, form_show_hide4 and so on.

I;m using PHP and JQuery.

Here is the Jquery code.

  $(function(){
      $('a#form_show_hide').click(function(){
        $('#form_container').slideToggle('slow');
        // prevent default action
        return false;
      });
    });

Here is the HTML code. Note I changed the ids to classes.

<a href="#" title="Reply Link" class="form_show_hide">Reply</a>


<form method="post" action="' .htmlentities($_SERVER['REQUEST_URI']) . '" class="form_container>
    <fieldset>
        <textarea rows="6" cols="70"></textarea>
        <input type="submit" name="reply" value="Submit" />
        <input type="hidden"  name="id" value="' . urlencode($comment_id) . '"  />
    </fieldset>
</form>

Answer 1

You can do it by finding the .form_container element relatively using .next() like this:

$(function(){
  $('a.form_show_hide').click(function(){
    $(this).next('.form_container').slideToggle('slow');
    return false;
  });
});

There's spacing in your code which gives me doubts though. If they're siblings but not immediate siblings use .nextAll('.form_container:first') rather than the .next() call.

If they're not siblings but are in some sort of parent container you can identify, for example:

<div class="container">
  <div>
    <a href="#" title="Reply Link" class="form_show_hide">Reply</a>
  </div>
  <form method="post" action="' .htmlentities($_SERVER['REQUEST_URI']) . '" class="form_container>
    <fieldset>
      <textarea rows="6" cols="70"></textarea>
      <input type="submit" name="reply" value="Submit" />
      <input type="hidden"  name="id" value="' . urlencode($comment_id) . '"  />
    </fieldset>
  </form>
</div>

Then go up to that container and back down, replacing the .next() call with .closest('.container').find('.form_container'). .closest() just needs a selector to identify that parent container correctly.