Question

我正在做一些HTML原型设计来探索一些UX的东西。虽然试图弄清楚为什么Javascript函数（使用大量的jQuery）无法正常工作，但我将其分解为JS Fiddle。似乎当在document.ready上调用该函数时，它将无法工作，并且无法通过单击事件执行。但是，如果没有在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准备好之后尝试

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

在调度DOM就绪事件后，获取$（“＃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');


   }

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

1 个答案: