Использование jQuery для поиска видимых предметов - PullRequest
Новая
       6

Использование jQuery для поиска видимых предметов

1 голос
/ 20 апреля 2011

У меня есть этот код, который показывает видеопроигрыватель и информацию о нем и скрывает ее при нажатии кнопки «Назад».Однако, когда я смотрю другое видео, кнопка «Назад» не определяет, какой div виден во второй раз.Должен ли селектор :visible быть связан с .live(), чтобы он мог определить, какой div виден?Если нет, то почему он не может найти мой видимый 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();
    });
});

и 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>

Ответы [ 2 ]

1 голос
/ 21 апреля 2011

Если не хватает еще HTML или JS, ваш код довольно сложен для того, что ему нужно сделать.Вот решение, которое включает в себя гораздо меньше JS (и лучшие практики, см. Ниже) и только 1 дополнительный элемент HTML (который в любом случае создает лучшее логическое разделение). 

  var $videolist = jQuery('ul.projects');
  var $videoplayer = jQuery('.video-container');
  var videoplayerID = jQuery('#video-player-1_wrapper').attr('id');

  jQuery('ul.projects li').click(function() {
    var filename = jQuery(this).find("img").attr("alt");
    var $infoclass = jQuery('.' + 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) {
              $videoplayer.fadeOut(function() {
                  $infoclass.fadeOut();
                  jwplayer(videoplayerID).remove();
                  $videolist.fadeIn();
              });
          }
      }
    });

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

  });

  jQuery('.back-to-projects').click(function(e) {
      e.preventDefault();
      jQuery('.info div:visible').fadeOut();
      $videoplayer.fadeOut(function() {
          jwplayer(videoplayerID).remove();
          $videolist.fadeIn();
      });
  });

<div class="video-container" style="display:none;">
    <div id="video-player-1_wrapper" style="float:left;"></div>
    <div class="info">
      <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>
    </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>

Несколько моментов:

Вы выполняли большую часть обхода DOM, в котором не было необходимости, когда вы могли просто напрямую использовать селекторы по идентификатору / классу, что я и делал выше.

Вы также дублировали некоторые переменные вместо их объявлениявыше событий щелчка.

Другая большая проблема с вашим кодом удвоилась для объектов jQuery.

Пример: 

var videolist = jQuery(this).closest('ul');
var videoplayer = jQuery(videolist).prev();

Первая строка возвращает объект jQuery (videolist).Нет смысла переносить это в jQuery () на следующей строке.Вы можете безопасно сделать: 

var videolist = jQuery(this).closest('ul');
var videoplayer = videolist.prev();

Если вы посмотрите на мой код, я использую $ var для ссылки на объект jQuery.Это чисто личное решение, но оно помогает быстро определить, является ли переменная объектом jQuery или нет.

Прочтите здесь для получения дополнительной информации о типе объекта jQuery: http://api.jquery.com/Types/#jQuery

1 голос
/ 20 апреля 2011

В итоге я упростил процесс, добавив класс .visible к видимому элементу, а затем удалил его, когда хотел скрыть его.Так стреляй в меня.

...