Can I pass “this” as a parameter to another function in javascript

Question

I have this:

$('#slider li').click(function () {
    var stepClicked = $(this).index();
    alert(stepClicked);
    if (stepClicked != 0) {
        $('#cs_previous').removeClass('cs_hideMe');
    } else {
        $('#cs_previous').addClass('cs_hideMe');
    }

    $('li.cs_current').removeClass('cs_current');
    $($(this)).addClass('cs_current');


    moveToNextImage(stepClicked);

    function moveToNextImage(stepClicked) {
        alert(stepClicked);
        var currentIs = $('li.cs_current').index();
        var newLeftEdge = currentIs - stepClicked;
        $('.cs_riskStageImage').fadeTo(200, .2).animate({
            left: newLeftEdge
        }, "fast").fadeTo(200, 1);
    };
});

the alert shows the proper index for the li clicked, and when I alert the variable within the last function I'm calling, moveToNextImage(stepClicked), the same value shows but the animation isn't happening. This works many other ways, but I'm trying to pass the index value of the list item clicked to use for the math to calculate.

..or can I convert the value to another variable in the first function that I can pass to the second?

Answer 1

The javascript functions call() and apply() are both for precisely for the purpose of calling a function within a context.

function sum() { 
    return this.num1 + this.num2; 
} 

function callSum(num1, num2) { 
    this.num1 = num1
    this.num2 = num2
    return sum.call(this);       //call sum() in the context of this 
} 

alert(callSum(10, 15)); 

function applySum(num1, num2) { 
    this.num1 = num1
    this.num2 = num2
    return sum.apply(this);   //call sum() in the context of this 
} 

alert(applySum(30, 45)); 

jsfiddle example link

Now in the sum() function the this keyword had the same context as it does in the callSum() and applySum() functions.

The difference between call() and apply() is that apply's second parameter is either an array of parameters to pass or an arguments object.

Answer 2

You can pass this to another function like

moveToNextImage(this, stepClicked);

function moveToNextImage(obj, stepClicked) {
    var index = $(obj).index;
}

In your code what is this line mean

$($(this)).addClass('cs_current');

it should be like

$(this).addClass('cs_current');