jQuery-为什么在document.ready上调用我的函数时会中断？

Question

我正在做一些HTML原型研究一些UX的东西。 在试图弄清为什么Javascript函数（使用大量jQuery）无法正常工作的同时，我将其分解为JS Fiddle。 似乎在document.ready上调用该函数时，该函数将不起作用，并且无法与click事件一起执行。 但是，如果未在document.ready中调用它，那么它将起作用！ 我可能缺少明显的东西...

工作： http ： //jsfiddle.net/NWmB5/

$(document).ready(function() {
    $('#targetFirstDiv').click(function() {
        setTimelinePosition($('#anotherDiv'));  
    });
    $('#targetSecondDiv').click(function() {
        setTimelinePosition($('#testDiv'));
    });   
});
var toDoCategories = [$("#testDiv"),$("#anotherDiv")];
/* Show current position on timeline */
function setTimelinePosition($position) {
    var $theTimelineTrigger = $('span.timelineTrigger');
        toDoCategories.forEach(function(currentCategory) {
            var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger);
            $($deselectTimelinePositionElement).removeClass('currentPosition');
         });
        var $selectTimelinePositionElement = ($($position,$theTimelineTrigger));
        $($selectTimelinePositionElement).addClass('currentPosition');
    }

不起作用： http : //jsfiddle.net/NWmB5/5/

$(document).ready(function() {
    setTimelinePosition($('#thirdDiv'));
    $('#targetFirstDiv').click(function() {
        setTimelinePosition($('#anotherDiv'));
    });
    $('#targetSecondDiv').click(function() {
        setTimelinePosition($('#testDiv'));
    });

});
var toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")];

/* Show current position on timeline */
function setTimelinePosition($position) {
    var $theTimelineTrigger = $('span.timelineTrigger');
    toDoCategories.forEach(function(currentCategory) {
        var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger);
        $($deselectTimelinePositionElement).removeClass('currentPosition');
    });
    var $selectTimelinePositionElement = ($($position,$theTimelineTrigger));
    $($selectTimelinePositionElement).addClass('currentPosition');
}

Answer 1

您尝试在触发DOM就绪事件之前获取$（“＃testDiv”），$（“＃anotherDiv”），$（“ thirdDiv”），这就是确切的问题所在。尝试在DOM ready触发后尝试

 var toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")]; 

因此，在分派DOM ready事件后，获取$（“＃testDiv”），$（“＃anotherDiv”），$（“ thirdDiv”）。

 var toDoCategories; //NOTE HERE

$(document).ready(function() {

  toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")]; //NOTE HERE

     setTimelinePosition($('#thirdDiv'));

$('#targetFirstDiv').click(function() {
     setTimelinePosition($('#anotherDiv'));

});
$('#targetSecondDiv').click(function() {
     setTimelinePosition($('#testDiv'));

});

});


/* Show current position on timeline */
function setTimelinePosition($position) {


          var $theTimelineTrigger = $('span.timelineTrigger');

  toDoCategories.forEach(function(currentCategory) {


var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger);

          $($deselectTimelinePositionElement).removeClass('currentPosition');
     });

  var $selectTimelinePositionElement = ($($position,$theTimelineTrigger));
  $($selectTimelinePositionElement).addClass('currentPosition');


   }