[WordPress] ワードプレスの JS コードの 1 行を壊しています。わからない理由

スポンサーリンク

Question

$(function(){
  $(".youtubeThumb").each(function(){
      $(this).bind('click touchstart', function(event){

        event.preventDefault();

      var ytLink = $(this).children('img').attr('src');
      //the line below is what keeps breaking
      var ytLink = ytLink.split('/vi/').pop().split('/').shift();
      var ytPlayList = 'PLDMZzXD-QCET2VK_l9aGhOXNMZjWjzI0g';

      $('.youtubeEmbed iframe').attr('src', '//www.youtube.com/embed/'+ytLink+'?list='+ytPlayList+'&wmode=transparent&autoplay=1');

    $('html, body').animate({
        scrollTop: $('.youtubeEmbed').offset().top
    }, 600);
      })
   })
});

//Error Below from console
Uncaught TypeError: Cannot read property 'split' of undefined ?page_id=28:169(anonymous function) ?       page_id=28:169n.event.dispatch jquery-2.1.1.min.js?ver=2.1.1:3r.handle

決して実際に前にワードプレスで働いているようにしようとしていますに関する方法オフができるので。ページへのリンクは http://twistedmess.com/?page_id=28

としてあなたを参照してくださいここで、別のページのコードの作品罰金 http://schottmandesign.com/test3

個別の js ファイルにスクリプトを置くことを試みたが、実際のページにそれを入れて、header.php にそれを自体、および今それに入れに含まれている私はその後、実際のページに呼んでいるショート プラグイン。任意の助けに感謝する

答え

子供たちは、代わりに何をしたいです検索を再帰的に jquery オブジェクト子供のすべての要素を見たいです親ディープ。 を参照してください下に 1 つだけレベルこのグッズの例 http://jsfiddle.net/gq36et5x/1 のフィドル。

代わりにあなたのコードのようになります:

$(function(){
  $(".youtubeThumb").each(function(){
  $(this).bind('click touchstart', function(event){

    event.preventDefault();

  var ytLink = $(this).find('img').attr('src');
  //the line below is what keeps breaking
  var ytLink = ytLink.split('/vi/').pop().split('/').shift();
  var ytPlayList = 'PLDMZzXD-QCET2VK_l9aGhOXNMZjWjzI0g';

  $('.youtubeEmbed iframe').attr('src', '//www.youtube.com/embed/'+ytLink+'?list='+ytPlayList+'&wmode=transparent&autoplay=1');

  $('html, body').animate({
    scrollTop: $('.youtubeEmbed').offset().top
}, 600);
  })
  })
});

そのないまた、クリックしてイベントにバインドする各ループの実行に必要なことができるこの方法をちょうどスリムなもの:

$(function(){
  $(".youtubeThumb").click(function(e){
    e.preventDefault();
    var ytLink, ytPlaylist; 
    ytPlaylist = 'PLDMZzXD-QCET2VK_l9aGhOXNMZjWjzI0g';
    ytLink = $(this).find('img').attr('src').split('/vi/').pop().split('/').shift();

    $('.youtubeEmbed iframe').attr('src', '//www.youtube.com/embed/'+ytLink+'?list='+ytPlayList+'&wmode=transparent&autoplay=1');
    $('html, body').animate({ scrollTop: $('.youtubeEmbed').offset().top}, 600);})
  })
});

答え

img タグは .youtubeThumb 要素の直接の子ではない、したがって

find

children

に変更します。さらに、

find

の要素 (または一致がない場合は、空の配列) の配列が返されますので、どのような

find

の内容を返す

src

属性; にアクセスしようとする前に確認する必要があります、

var ytThumb = $(this).find('img');
if (ytThumb.length > 0) {
    var ytLink = ytThumb[0].attr('src');
    // ... the rest of the code
}

編集: 一方で gabereal で回答を得た

http://stackoverflow.com/questions/27084980/one-line-of-js-code-is-breaking-within-wordpress-not-sure-why

スポンサーリンク

Leave a Reply