CODEWITHSUNDEEP
phpjqueryhtmljquery-selectors
Abhishek Tripathi
Abhishek Tripathi

Reputation: 104

Bind event of a specific element to a specific target

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

Upvotes: 2

Views: 179

Answers (4)

PoloRM
PoloRM

Reputation: 155

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
});

Upvotes: -1

webnoob
webnoob

Reputation: 15934

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');

});

Upvotes: 6

Abhishek Saha
Abhishek Saha

Reputation: 2564

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');
});

Upvotes: 1

Piotr Kempa
Piotr Kempa

Reputation: 402

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/

Upvotes: 0

Related Questions