When an anchor tag is clicked, "anotherDiv" is made visible.
Using jQuery, I want to be able to fetch the description within each li onClick of the anchor tag and insert it into the "anotherDiv" area which is also visible onClick of an anchor tag. The description text is initially set to display none.
<style>
.desc{
display:none;
}
#anotherDiv{
display: none;
}
</style>
<li style="overflow: hidden; float: none; width: 158px; height: 125px;">
<a onClick="return addPlayer(952541791001, 661361792001, 600, 320)" id="no8" class="video-pop">
<img width="132" height="75" alt="" src="image.jpg">
</a>
<div class="label">The label goes here......</div>
<div class="desc">The description goes here.....</div>
</li>
<li style="overflow: hidden; float: none; width: 158px; height: 125px;">
<a onClick="return addPlayer(952541791001, 661361792001, 600, 320)" id="no10" class="video-pop">
<img width="132" height="75" alt="" src="image.jpg">
</a>
<div class="label">The label goes here......</div>
<div class="desc">The description goes here.....</div>
</li>
-------------------------------------------------------------
<div id="anotherDiv"></div>
Try this:
ReplyDeletehttp://jsfiddle.net/MZga6/
$('a').bind('click.myClick', function() {
var that = $(this);
$('#anotherDiv').text(that.parent().find('.desc').text()).show();
});
When list item is clicked, get child description. Then insert its html in anotherDiv.
ReplyDelete$('li').click( function() {
$('#anotherDiv').html($(this).children('.desc').html());
});
//a more readable format to help you understand
$('li').click( function() {
//$this is the clicked list item. We search its children for class `desc` and get contents
var desc = $(this).children('.desc').html();
//set anotherDiv's contents
$('#anotherDiv').html(desc);
});