javascript - 无法调用在 javascript 中声明的函数

Question

我在 JavaScript 中声明了一个函数，并在其中声明了一些 JQuery 代码，并且我在单击事件中调用此函数，但它没有被调用。当我用 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");
});