Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Joe Bruno
Joe Bruno
35,909 Points
Posted by Joe Bruno
Joe Bruno
35,909 Points

jQuery Click Select Class

Hello Everyone,

I have the following code that works with one flaw that I cannot seem to fix. As you will notice, the first two "view span12" divs and their child contents are the identical. In my project, they are generated by another bit of jQuery as an rss feed. I will have many of them on every page. I am trying to use ONLY CLASSES to keep my code simpler (since its generated via jQuery). So here's my question, my jQuery script below pulls the body contents of the rss item into another div. As written, it pulls ALL bodys for ALL my RSS feeds - not just the one for the item clicked. How can I fix this without using an ID? In other words, how do I modify my jQuery to only pull the {body} content located next to the link that the user clicked? Thanks in advanced.

<div class="view span12">
       <div class="view-back">
           <a class="feedlink" href="#"><img class="go" src="/assets/go.png"/></a>
           <div class="feedBody">{body}</div>
</div>
 <div class="front">
      <div class="date circle">{prettyDate}</div>
      <div class="title">{title}<br>{author}</div>
 </div>

</div>

<div class="view span12">
     <div class="view-back">
          <a class="feedlink" href="#"><img class="go" src="/assets/go.png"/></a>
         <div class="feedBody">{body-2}</div>
     </div>
  <div class="front">
    <div class="date circle">{prettyDate}</div>
     <div class="title">{title}<br>{author}</div>
  </div>
</div>

<div class="testr">TEST ME</div>

<script>
$(document).ready(function() {
    $(".feedlink").click(function (e) {
        $("body").removeClass("active");
           $(".feedlink").focus().next(".feedBody").toggleClass("active");
           $(".testr").html($(".active"));
          e.preventDefault();
     });
  });

</script>

6 Answers

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

What you'll want to do is look at the target of the event instead of using jQuery matchers inside of your callback. Check out event.target in the jQuery docs.

I'm not actually testing this, but your code should end up looking something like:

$(document).ready(function() {
    $(".feedlink").click(function (e) {
        $("body").removeClass("active");
           e.target.focus().next(".feedBody").toggleClass("active");
           $(".testr").html($(".active"));
          e.preventDefault();
     });
  });
Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

Thanks Alan. Huge help. I've got a bug somewhere in my code because it won't work in my project, but I have it working in this fiddle: http://jsfiddle.net/UTM39/

However, I discovered another issue in the fiddle. If you click the link twice, the whole thing falls apart. Have any ideas how I can fix this?

PS. You have to hover over the element for 1 second before it shows the link underneath it.

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

Oops. I forgot the save the fiddle. Hold on.

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

http://jsfiddle.net/pHL67/

PS. You have to hover over the element for 1 second before it shows the link underneath it.

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

Finally got it. Heres the working fiddle: http://jsfiddle.net/zF65u/

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

That's awesome news! Great work!