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控制台中收到此错误：未捕获的TypeError：无法调用未定义的方法'onSeek'。

如果我评论“var scrollable”行中的所有内容，那么在没有#mediaNavScrollable ID的页面上一切正常。我如何包装JS以便它只有在#mediaNavScrollable？

时触发

Answer 1

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

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

~~这不是由缺少的元素引起的。如果元素丢失了，你就永远不会把它放到发生错误的代码中。~~ 编辑 - oops我没有将OP的代码向右滚动得足够远;我认为它下面的代码令人困惑地缩进是处理函数的一部分。

相反，问题在于：

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

什么都没有回来。您的“mediNavScrollable”元素中没有存储称为“可滚动”的数据元素。这可能意味着HTML中的元素应该如下所示：

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

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

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

5 个答案: