StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery - How can I stop appending connect to an element selected by class?
primarykey
Id
9802803
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2012-03-21T10:34:45.073
FavoriteCount
0
LastActivityDate
2012-03-21T10:57:36.770
LastEditDate
LastEditorUserId
0
OwnerUserId
927595
ParentId
0
PostTypeId
1
Score
-1
ViewCount
415
LastEditorDisplayName
text
Body
I have a page that describes various options that people can implemenet. To better define these explanations I have an icon that reveals a large relevant image on hover. The html for this would look something like (for simplicity I have included only 2 elements with class x but in reality there would be a lot more) <pre><code><div id="innerlayout"> <ul> <li>Content for 1 <a class="x" href="javascript:void(0)" rel="large-image-1.jpg" title="Caption for Large Image 1"> <img src="learn-more.jpg" alt="Learn More Icon" width="30" height="30" /> </a> </li> <li>Content for 2 <a class="x" href="javascript:void(0)" rel="large-image-2.jpg" title="Caption for Large Image 2"> <img src="learn-more.jpg" alt="Learn More Icon" width="30" height="30" /> </a> </li> </ul> </div> </code></pre> The jQuery I currently have looks like this. <pre><code>$document.ready(function() { $('a.x', $('#innerlayout')).hover( function () { var path = $(this).attr('rel'); var text = $(this).attr('title'); $(this).append($("<img src='"+path+"' /> "+text+"")); $('p.revealer').hide().fadeIn(500); }, function () { $(this).find('p:last').remove(); } ); }); </code></pre> This works fine but I was looking to change it so that the appended paragraph was hidden rather than removed, the class of the <a> tag changed to something other than "x" and subsequent hovers of this newly classed <a> would show the now existing content. I came up with this, but this continues to append the content on each subsequent hover despite the changed <a> element class. Can anyone suggest to me what I'm doing wrong here, and how I might fix it? Thanks in advance. <pre><code>$(document).ready(function() { $('a.x', $('#innerlayout')).hover( function () { var path = $(this).attr('rel'); var text = $(this).attr('title'); $(this).append($("<img src='"+path+"' /> "+text+"")); $('p.revealer').hide().fadeIn(500); }, function () { $(this).find('p:last').hide(); $(this).removeClass('x').addClass('revealed'); } ); $('a.revealed', $('#innerlayout')).hover( function() { $(this).find('p').show(); }, function () { $(this).find('p').hide(); } ); }); </code></pre>
Tags
<jquery><append>
Title
jQuery - How can I stop appending connect to an element selected by class?
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USdajoto
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POjQuery - How can I stop appending connect to an element selected by class?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTDownMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.