不能调用在javascript中声明的函数

Question

我已经在JavaScript中声明了一个函数，并在其中添加了一些JQuery代码，并且我在click事件中调用了此函数，并且它没有被调用。 而当我用function关键字定义一个函数期望函数时，所以我必须使用函数作为表达式。该函数在点击事件之外被调用，比如在文档准备好时全局调用。

的JavaScript

var item_width = $('.item-slider').width(); 
var item_margin = (item_width-600)/5; //sum of 4 elements divided by 5 margin spaces 
var items = $('ul.item-slider>li'); 
var x = 0; 
$.each(items,function(index){ 
    $(this).data("id",x); 
    x = x+1; 
}); 

var x = function(){ 
    $.each(items,function(index){ 
     var pos = $(this).data('id'); 

     if($(this).data('id') < 1){ 
      var left =(pos-1) * 150 + (pos-1) * 10; 
      -Math.abs(left); 
      $(this).css("left",left); 
     } 
     else if($(this).data('id') === 1){ 
      $(this).css("left", 0); 
      console.log("positon is set to" + $(this).css("left")); 
     }   
     else if($(this).data('id') > 1){ 
      var left = (pos-1) * 150 + (pos-1) * 10; 
      $(this).css("left", left); 
      console.log("positon is set to " + $(this).css("left")); 
     } 
    }); 
} 

// commented x(); 

$(".explore_matches > button[name = 'pre']").click(function(){ 
    $.each(items,function(index){ 
     console.log("each working"); 
     $(this).data('id',"abc"); 
    }) 
    x(); 
    console.log("skipped"); 
}); 

Answer 1

var item_width = $('.item-slider').width(); 
var item_margin = (item_width-600)/5; //sum of 4 elements divided by 5 margin spaces 
var items = $('ul.item-slider>li'); 
var x = 0; 
$.each(items,function(index){ 
    $(this).data("id",x); 
    x = x+1; 
}); 

function needToCall(){ 
    $.each(items,function(index){ 
     var pos = $(this).data('id'); 

     if($(this).data('id') < 1){ 
      var left =(pos-1) * 150 + (pos-1) * 10; 
      -Math.abs(left); 
      $(this).css("left",left); 
     } 
     else if($(this).data('id') === 1){ 
      $(this).css("left", 0); 
      console.log("positon is set to" + $(this).css("left")); 
     }   
     else if($(this).data('id') > 1){ 
      var left = (pos-1) * 150 + (pos-1) * 10; 
      $(this).css("left", left); 
      console.log("positon is set to " + $(this).css("left")); 
     } 
    }); 
} 



$(".explore_matches > button[name = 'pre']").click(function(){ 
    $.each(items,function(index){ 
     console.log("each working"); 
     $(this).data('id',"abc"); 
    }) 
    needToCall(); 
    console.log("skipped"); 
});