Question

你好我试着制作类似github treeslider的东西

我是javascript的新手..

但是我正在做什么

jQuery(document).ready(function(){
    $('#red-side-menu a').pjax({
        container: '#ajax-users-v1',
    });


    var toggle;
    if (typeof toggle != 'undefined') {
        toggle = true;
    }

    if (toggle) {
        $('body')
        .bind('start.pjax', function() { $('#ajax-users-v1').show("slide", { direction: "right" });  })
        .bind('end.pjax',   function() {  })
        toggle = false;
    };

    if (!toggle) {
    $('body')
      .bind('start.pjax', function() { $('#ajax-users-v1').show("slide", { direction: "left" });  })
      .bind('end.pjax',   function() {  })
      toggle = true;
    }


    $('#red-edit-full a').pjax({
        container: '#ajax-users-v1',
    });     
});

之前我正在使用php来获取$ _GET ['infolder']，但它似乎并不那么好。 现在问题是它向左滑动

有办法做到这一点吗？

Answer 1

我认为这可以简化。

# this variable maintains state for the lifetime of the page
var direction = "right";
jQuery(document).ready(function(){
  # this whole statement only executes once
  $('#red-side-menu a').pjax({
    container: '#ajax-users-v1'
  });

  # this line executes once
  $('body')
    # this line executes once
    .bind('start.pjax', function() {
      # this line executes every time the start.pjax event reaches the body element
      $('#ajax-users-v1').show("slide", { direction: direction });  
    })
    # this line executes once
    .bind('end.pjax', function() {
      # this line executes every time the end.pjax event reaches the body element (hint: this event is raised after start.pjax is finished) 
      direction = (direction == "right" ? "left" : "right"); 
    });

  # this whole statement only executes once
  $('#red-edit-full a').pjax({
    container: '#ajax-users-v1'
  });     
});

文档就绪事件仅自动运行一次。我已经评论了代码，以显示何时执行每个行或语句块。理解事件处理程序中的代码是在页面加载完成后将要运行的唯一代码非常重要。

Answer 2

只需在函数

之外给x赋值

var x = true;
jQuery(document).ready(function(){ ...

Answer 3

这里发生的是您声明var x而不给它一个值。因此undefined为typeof x != 'undefined'，因此x为假，因此您最终不会将x设置为true。

（顺便说一句，undefined表示什么？请将变量命名为人类可以理解的东西......）

然后，由于if (!x)是“falsy”，$('body')内的代码会被执行。 x绑定了这些事件，jQuery(document).ready设置为true。

然后，您传递给x的函数结束，var x超出范围，再也不会被任何人看到或使用。所以它的存在是毫无意义的;您可以在if (!x)之前，$('#red-edit-full a').pjax...内部以及{{1}}

之前注释掉除{}之前的所有代码

首先单击向右滑动第二次单击向左滑动jquery

3 个答案: