jQuery / JS错误在没有给定ID的页面上时

Question

我有一种情况，我很确定这是基本的东西，我只是不知道适合的语法/顺序：

我的网站的$(document).ready(function()有以下代码：

$(document).ready(function() {

//Prevents default anchor tag behavior
$('#socialScroller a, #contributePod a, .prev, .next').click(function(e) {
    e.preventDefault();
});


//Scrollable for Social Sidebar area
$(".socialScrollable").scrollable({ easing:"easeInOutCubic", vertical:true, next:".socialNext", prev:".socialPrev"});
  var scrollable = jQuery(".socialScrollable").data("scrollable");
  var size = 3;
  scrollable.onSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      jQuery("a.socialNext").addClass("disabled");
    }
  });
  scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
  });

//Scrollable for History page
$(".historyScrollable").scrollable({ easing:"easeInOutCubic"}).navigator();

//Scrollables for Media page
$(".mediaScrollable").scrollable({ easing:"easeInOutCubic"}).navigator({navi:'#pressNavTabs'});

$("#mediaNavScrollable").scrollable({ easing:"easeInOutCubic", next:".nextMedia", prev:".prevMedia"});
  var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
  var size = 4;
  scrollable.onSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      jQuery("a.nextMedia").addClass("disabled");
    }
  });
  scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
  });


$("#mediaNavScrollable").scrollable({ easing:"easeInOutCubic"});

//History Scroller
$(function() {      
    $(".vertHistoryScroller").scrollable({ vertical:"true", easing:"easeInOutCubic", next:".nextVert", prev:".prevVert" }).navigator(); 
});

//Contribute Sidebar Actions
$(".contributeContainer").hide();

$("#contributePod a").click(function(){
    var aData = $(this).attr("data-name");
    $(".contributeContainer").fadeOut("fast");
    $("#"+aData).fadeIn("slow");
});

$(".contributeContainer a").click(function(){
    $(this).parent(".contributeContainer").fadeOut("fast");
});

}）;

在没有#mediaNavScrollable的任何页面上，我在JS控制台中收到此错误：Uncaught TypeError：无法调用未定义的方法“ onSeek”。

如果我从“ var scrollable”行开始注释所有内容，那么在没有该#mediaNavScrollable ID的页面上，一切都可以正常工作。 如何包装该JS，以便仅在具有#mediaNavScrollable时才触发？

Answer 1

您需要检查scrollable是否不为null且其中是否包含任何元素。 如果没有，请退出处理程序。

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
if(scrollable == null || scrollable.length==0) return;

这将退出处理程序，而无需运行任何其他代码。 或者，您可以使用if块：

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
if(scrollable == null || scrollable.length==0) 
{
    //element doesnt exist, perform alternate action
}
else
{
    //element does exist, do normal stuff here
    scrollable.onSeek(......);
}

Answer 2

if ($("#mediaNavScrollable").length){
      // your code
}

Answer 3

您需要检查是否可滚动：

if(scrollable)
{ 
  ...
}

Answer 4

您可以检查元素是否首先存在，如下所示：

if ($("#mediaNavScrollable").length) {
  //your code here
}

Answer 5

这不是由缺少元素引起的。 如果缺少该元素，则永远不会将其放入发生错误的代码中。 编辑 -糟糕，我尚未将OP的代码向右滚动足够远； 我认为它下面的代码容易缩进是处理程序函数的一部分。

相反，问题在于：

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");

什么也没返回。 “ mediNavScrollable”元素上没有存储称为“ scrollable”的数据元素。 这可能意味着HTML中的元素应该看起来像这样：

<div id='mediaNavScrollable' data-scrollable='something'>

但我对此表示怀疑，因为该代码似乎期望它是DOM元素。 （对jQuery和老式DOM 0处理程序的不愉快混合也是如此）。 这意味着要使代码正常工作，不仅需要将该元素放在页面上，而且还必须在该元素的jQuery数据存储区中添加对DOM节点的引用。