CSS 时间轴滚动条禁用导航

Question

尊敬的人...

我正在开发一个时间轴滚动器，当我向左滚动时它会给我带来问题......

当元素数量不再存在时，我需要禁用导航...

我同时使用绑定和取消绑定：

$("#right,#left").click ->
  #alert page_no
  if page_no >= (size-1)
    $("#right").unbind("click")
  else
    #alert "activating right"
    $("#right").bind("click")
  if page_no > 3
    $("#left").unbind("click")
  else
    #alert "activating left"
    $("#left").bind("click")

但左侧导航不起作用。

基本上，右导航应该在显示第 15 个元素后被禁用，而左导航应该在溢出第一个元素之前被禁用......

这是我目前的状态： http://codepen.io/akashdevaraju/pen/vikar

我已经检查了很多次js但无法弄清楚......

PS：我以前的代码具有工作导航但没有残疾功能 http://codepen.io/akashdevaraju/pen/tiesa

编辑：添加 JS 版本

Answer 1

通过移除取消绑定并将页面检查移动到 if right/left 块中来修复它：

  $("#right,#left").click ->
    #alert page_no
    id = this.id
    patt = /-?\d+/g
    circles = $(".circle")    
    if id is "right"  

      if page_no >= (size-1) #moved first if statement here
         return
      page_no = page_no + 1
      for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef - 80            
        $(cir).css("left","#{le}px")
    else      
      if page_no <= 3 #moved second if statement here
         return
      page_no = page_no - 1 

      #alert page_no
      for cir in circles        
        left = $(cir).css("left")        
        lef = Number(left.match(patt))        
        le = lef + 80
        $(cir).css("left","#{le}px")

http://codepen.io/anon/pen/Hhazm

发生的事情是 unbind('click') 也解除了父函数的绑定，因此没有发生任何页码检查。通过使用return，仍然会绑定click，但仍然会进行页面检查。

需要对 if 语句进行调整，以使您最多达到 15 页。

Answer 2

您需要为 .bind() 定义一个行为，对吗？你不能只说“绑定”——你实际上并没有将任何东西绑定到选择器。

$('#left-arrow').bind('click', function(event) {
    // click handling code goes here
});