Question

I have this code that shows a video player and that video’s information and hides it when the back button is clicked. However, when I view another video, the back button does not pick up which div is visible the second time around. Does the :visible selector have to be linked to .live() in order for it to determine which div is visible? If not, why can’t it find my visible div?

jQuery('ul.projects li').click(function() {

var videolist = jQuery(this).closest('ul');
var videoplayer = jQuery(videolist).prev();
var videoplayerID = jQuery(videoplayer).find("div:first").attr("id");
var filename = jQuery(this).find("img").attr("alt");

var infoclass = '.' + filename.replace(/ /g,'');

  jwplayer(videoplayerID).setup({
    'flashplayer': '/_/jw/player.swf',
    'id': 'playerID',
    'width': '258',
    'height': '145',
    'file': '/_/videos/' + filename + '.mp4',
    'autostart': true,
    'events': {
        onComplete: function(event) {
            jQuery(videoplayer).fadeOut(function() {
                jQuery(infoclass).fadeOut();
                jwplayer(videoplayerID).remove();
                jQuery(videolist).fadeIn();
            });
        }
    }
  });

  jQuery(videolist).fadeOut(function() {
    jQuery(videoplayer).fadeIn();
    jQuery(infoclass).fadeIn();
  });

});

jQuery('.back-to-projects').click(function(e) {
    e.preventDefault();
    var videoplayer = jQuery(this).parent();
    var videolist = jQuery(videoplayer).next();
    var videoplayerID = jQuery(videoplayer).find("div:first").attr("id");
    var videoinfo = '.' + jQuery(this).siblings("div:visible").not("#video-player-1_wrapper, #video-player-2_wrapper").attr("class");
    alert(videoinfo);
    jQuery(videoinfo).fadeOut();
    jQuery(videoplayer).fadeOut(function() {
        jwplayer(videoplayerID).remove();
        jQuery(videolist).fadeIn();
    });
});

and the html

<div class="video-container" style="display:none;">
    <div id="video-player-1_wrapper" style="float:left;"></div>
    <div class="DwightHoward" style="display:none;"><p>Dwight Howard, son.</p></div>
    <div class="BrianDeegan" style="display:none;"><p>Brian Deegan, son.</p></div>
    <div class="PatrickWillis" style="display:none;"><p>Patrick Willis, son.</p></div>
    <div class="Castles" style="display:none;"><p>Castles, son.</p></div>
    <div class="Springtime" style="display:none;"><p>Springtime, son.</p></div>
    <div class="Powerbar" style="display:none;"><p>Powerbar, son.</p></div>

    <a class="back-to-projects" href="" title="Back">Back</a>
</div>


<ul class="projects">
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/dwight-howard.jpg" alt="Dwight Howard" /></li>
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/brian-deegan.jpg" alt="Brian Deegan" /></li>
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/patrick-willis.jpg" alt="Patrick Willis" /></li>
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/castles.jpg" alt="Castles" /></li>
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/springtime.jpg" alt="Springtime" /></li>
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/powerbar.jpg" alt="Powerbar" /></li>
</ul>   

Answer 1

I ended up simplifying the process by add a class .visible to the visible element, and then removing it when I wanted to hide it. So shoot me.