jQuery/JS 错误当页面没有给定 ID 时

Question

我遇到了一种情况，我很确定这是基本的情况，我只是不知道正确的语法/顺序：

我的网站的 $(document).ready 中有以下代码（函数（）：

$(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 控制台中收到此错误： 未捕获的类型错误：无法调用未定义的“onSeek”方法。

如果我从“varscrollable”行开始注释所有内容，则在没有 #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

这不是由缺少元素引起的。如果缺少该元素，您将永远不会将其放入发生错误的代码中。 编辑 — 哎呀，我没有将操作代码向右滚动得足够远；我认为下面令人困惑的缩进代码是处理程序函数的一部分。

相反，问题在于：

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

没有返回任何内容。 “mediNavScrollable”元素上没有存储名为“scrollable”的数据元素。这可能意味着 HTML 中的元素应该如下所示：

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

但我对此表示怀疑，因为该代码似乎期望它是一个 DOM 元素。 （这也是 jQuery 和旧式 DOM 0 处理程序的令人不快的混合）。这意味着要使代码正常工作，您不仅需要该元素位于页面上，而且还必须在元素的 jQuery 数据存储中保留对 DOM 节点的引用。