CODEWITHSUNDEEP
javascriptjqueryhtml
Anthony
Anthony

Reputation: 2416

Get text from <span> on click

When the like button div is clicked I am trying to get the content from its span. I know I need to use .text() but im having trouble selecting the corresponding span for each div.

$(".like").click(function(event){       
   event.stopPropagation();                     
   $("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");  
   console.log($('.hideThis').text());
});

returns the string in each span. Do I need to use "this" somewhere? 

<div class= "postInfo1>
 <span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>


<div class= "postInfo2>
 <span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>


<div class= "postInfo3">
 <span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>

Upvotes: 0

Views: 1406

Answers (4)

Smeegs
Smeegs

Reputation: 9224

Your markup is all jacked up. You have strings and tags that aren't closed.

I cleaned it up for you

<div class="postInfo1"> <span class="hideThis" style="display:none">3453652545</span>

</div>
<div class="like">Like Button</div>
<div class="postInfo2"> <span class="hideThis" style="display:none">3453652545</span>

</div>
<div class="like">Like Button</div>
<div class="postInfo3"> <span class="hideThis" style="display:none">3453652545</span>

</div>
<div class="like">Like Button</div>

Upvotes: -1

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need to do it this way -

Demo ------> http://jsfiddle.net/v4mew/

$(".like").click(function(event){       
   event.stopPropagation();     
   $("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");                  
   console.log($(this).prev('div').find('.hideThis').text());
});

Corrected markup - 

<div class="postInfo1"> <span class="hideThis" style="display:none">3453652545</span> 
</div>
<div class="like">Like Button</div>
<div class="postInfo2"> <span class="hideThis" style="display: none">3453652545</span> 
</div>
<div class="like ">Like Button</div>
<div class="postInfo3"> <span class="hideThis" style="display: none">3453652545</span>
</div>
<div class="like ">Like Button</div>

Upvotes: 0

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70159

Do I need to use "this" somewhere?

Yes, so you can traverse the DOM having this (the clicked element) as the starting point:

$('.like').click(function(event) {
    //...
    console.log( $(this).prev().find('.hideThis').text() );
});

Upvotes: 1

PSL
PSL

Reputation: 123739

Yes and try this:

$(".like").click(function(event){       
   event.stopPropagation();                     
   $("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");  
   console.log($(this).prev('div').find('.hideThis').text()); //Find the previous div relative to the clicked span and insisde that find hideThis
});

And remember to close your div, qoutes after the classname postInfo1 and remove quotes in the style value style="display:"none";

Demo

Upvotes: 1

Related Questions