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

我之前从未真正使用过wordpress，所以我可能会想要做的事情。该页面的链接是http://twistedmess.com/?page_id=28

正如您在单独的页面上看到的那样，代码正常http://schottmandesign.com/test3

我已经尝试将脚本放在一个单独的js文件中，然后将其放入header.php中，将其放入实际的页面本身，现在它被包含在一个短代码插件中，然后我调用它实际页面。非常感谢任何帮助。

Answer 1

找到你想要的而不是孩子。您希望以递归方式查看jquery对象中的所有元素。孩子只比父母深一层。看一下玩具示例的小提琴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);
  })
  })
});

另外，没有必要运行每个循环来绑定click事件。你可以通过这种方式减肥：

$(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);})
  })
});

Answer 2

img标记不是.youtubeThumb元素的直接子元素，因此将children更改为find。此外，find将返回一个元素数组（如果没有匹配则返回一个空数组），因此，在尝试访问{{{}}之前，需要检查find返回的内容。 1}}属性;

src

编辑：在此期间由gabereal回答。

一行JS代码在Wordpress中破解。不知道为什么

2 个答案: