admin管理员组

文章数量:1313810

I have 3 div elements on my page and each of them has a same CSS class ".shape"

Within my JS, I want to target the current click ".shape" so that some extra html will get inserted to the bottom of the ".shape" with a jQuery slideDown transition.

And when you click on the ".shape" again, the extra html will slideUp.

How do I do that in an easy way? What I have:

$(".shape").click(function() {
    var id = $(this).attr("id");
    var selected = id + "-reveal";
});

In my HTML,

<div class="shape" id="shape1">Content</div>
<div class="hidden" id="shape1-reveal">Content</div>

<div class="shape" id="shape2">Content</div>
<div class="hidden" id="shape2-reveal">Content</div>

<div class="shape" id="shape3">Content</div>
<div class="hidden" id="shape3-reveal">Content</div>

I also have no idea how to add in the toggle + sliding effect.

EDIT: The solution

Not sure if the way I wrote my JS is the most elegant approach.

I have 3 div elements on my page and each of them has a same CSS class ".shape"

Within my JS, I want to target the current click ".shape" so that some extra html will get inserted to the bottom of the ".shape" with a jQuery slideDown transition.

And when you click on the ".shape" again, the extra html will slideUp.

How do I do that in an easy way? What I have:

$(".shape").click(function() {
    var id = $(this).attr("id");
    var selected = id + "-reveal";
});

In my HTML,

<div class="shape" id="shape1">Content</div>
<div class="hidden" id="shape1-reveal">Content</div>

<div class="shape" id="shape2">Content</div>
<div class="hidden" id="shape2-reveal">Content</div>

<div class="shape" id="shape3">Content</div>
<div class="hidden" id="shape3-reveal">Content</div>

I also have no idea how to add in the toggle + sliding effect.

EDIT: The solution http://codepen.io/vennsoh/pen/rVjeQy

Not sure if the way I wrote my JS is the most elegant approach.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 29, 2015 at 0:56 Vennsoh asked May 28, 2015 at 22:42 VennsohVennsoh 5,00166 gold badges3030 silver badges4242 bronze badges 2

• Well, $(this) has the clicked element already. Or it should. – lucasnadalutti Commented May 28, 2015 at 22:46
• $(this) within your click handler code will target the clicked div. – j08691 Commented May 28, 2015 at 22:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Target the element clicked with $(this)

$(".shape").click(function() {
    var clickedShape = $(this);
});

Once you have $(this), you can target elements inside of it with find().

Or in the case of your HTML, use next() to locate the reveal element after your shape.

Once you have found the proper element, you can slideUp(), slideDown(), or slideToggle().

Example

$(".shape").click(function() {
    var revealThing = $(this).next();

    revealThing.slideToggle();
});

http://jsfiddle/yopp6L22/1/

As the ments said you already are acting on the shape that is clicked by using the $(this) ... you just haven't done anything to it yet, so you don't realize that.

Many toggles work by adding and removing a class to the elements you wish to show/hide.

so if you css had:

.hidden { display:none }
.visible { display:block }

then you could toggle the visibility by adding the visible class to the clicked element like such:

$(".shape").click(function() {
  if($(this).hasClass("visible")) { $(this).removeClass("visible"); }
  else { $(this).addClass("visible"); }
});

in jQuery, when you're inside an event handler callback function, the 'this' keyword refers to the element that triggered the event.

So in your example, when you click an element with the "shape" class, it will trigger the callback function (since the event was attached to all elements with "shape"). But only 1 callback will fire at any given time, and that callback will have a reference to the particular DOM element (i.e. the proper div) that kicked off the event.

The way it works in normal javascript would work as well, if you pass an event argument to your callback, you can access the event.target and event.currentTarget properties (which are DOM element references relative to the triggered event). currentTarget is generally equal to 'this'. https://api.jquery./event.currentTarget/

You'll use this most of the time I'm sure, as it's simpler. But in more advanced cases where the this keyword gets ovverridden, perhaps by a bind, then event.currentTarget is a stable fallback.

$(".shape").click(function(event) {
   var whatGotClicked = event.currentTarget;
   var whatGotClicked = this; //both wor
});

TL;DR In short what you have will work fine, but I hope you have a greater understanding of why.

Where to go from there?

$(".shape").click(function() {
    var id = $(this).attr("id");
    var selected = $(id + "-reveal"); //this will give you a jQuery object targeting the selected id of the reveal element
    selected.toggle(); //at this point you decide, jQuery has alot of helper methods, like slideDown() and slideUp or .animate
});

https://api.jquery./?s=toggle

Here is the jquery code that alerts the id of the clicked elements

$('.shape').on('click', function(event) {
    alert(event.target.id);
 });

本文标签： javascriptjQuery How do I target the clicked element when they all share the same CSS classStack Overflow