Bind event of a specific element to a specific target

Question

i am using while loop to output data in

   <p><?php echo $title;?></p></font></a><button id=show>show()</button>               <button id=hide>hide()</button>

my show hide function is

$("#show").click(function () {
   $("p").show('fast');

});

$("#hide").click(function () {
   $("p").hide('fast');
});

 $("#reset").click(function(){
    location.reload();
});

now when i am clicking show hide only the first show hide loop is working and it shows/hides all the data not just the one i clicked

Answer 1

Change the code to use this, like so:

$(this).prev('p').show('fast');

You will need to do this in each JQuery .click section.

Edit: Another good point which has been mentioned, you are using an ID for your element which won't allow this to work on more than one. Your new markup should look like:

<p><?php echo $title;?></p></font></a><button class="show">show()</button>    

and the JQuery:

$(".show").click(function () {
   $(this).prev('p').show('fast');

});

Answer 2

Welcome to SO. Nice to see that you have formated your first question nicely.

Few things you might want to change.

As you are going through a loop, make sure you use a counter inside the loop and add the counter to the id. This will make the id a unique identifier. Also wrap them inside a div.

 $counter = 0;
 forloop {

    $counter++;
    <div>
    <p><?php echo $title;?></p></font></a><button id="show<?php echo $counter; ?>">show()</button>
    </div>        

 }

So now your id will be unique. Now you can write your jquery in the below way.

$("button").click(function () {
  $(this).attr('id'); //not required but incase you need the id of the button which was clicked.
  $(this).parent().find("p").show('fast');

});

$("button").click(function () {
   $(this).parent().find("p").hide('fast');
});

Answer 3

Two things: 1. I think you can only have one element with one id, such as #show. If you want to reference more buttons, you should use a class, such as this: show() (as I understand the buttons are output in a loop, there will be more of them).

Second: inside your javascript code, you do $("p")... - this references all

elements on the page. I think you should use $(this) and start from there, check out this article, it explains a lot: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Answer 4

There are many ways to go at this. Here's one:

First, add the loop number to the IDs (let's say it's $i)

<p id="TITLE_<?php echo $i; ?>" style="display:none;"><?php echo $title;?></p>
<input type="button" class="show" data-number="<?php echo $i; ?>"/>               
<input type="button" class="hide" data-number="<?php echo $i; ?>" />

Your functions will then be:

$(".show").click(function () {
   $("TITLE_" + $(this).data('number')).show('fast');
});

$(".hide").click(function () {
    $("TITLE_" + $(this).data('number')).hide('fast');
});

Of course there are ways to do it via JQUERY without the use of the $i.

Edit: To have the

tags hidden on page load, either use the style=display:none as I have added in the

tag above, or you can use JQuery as follows:

$(document).ready( function() {
    $("p[id^=TITLE_]").hide(); 
// this will retrieve all <p> tags with ID that starts                    
// with TITLE_ and hide them
});