Question

I have these 2 functions and would like 1 to execute the other with a specified variable:

function ckbmovestate() {
    $(this).css("-webkit-transform", "translate(53px, 0px)")

    };

function initcheckbox(){
    var togglebox = "<div class='toggle_box'><div class='switch'></div></div>";
    $('input[type=checkbox]').css('display','none');
    $('fieldset[data-input-type=checkbox]').append(togglebox);
    $('fieldset:has(:checkbox:checked)').each(function(){
        $(this).find('.switch').attr('data-state', 'on');
        ckbmovestate($(this))
    });
    $('fieldset:has(:checkbox:checked)')
    $('fieldset:not(:has(:checkbox:checked))').find('.switch').attr('data-state', 'off');

};

As you might guess, this does not work. Question is why? Could you give me a quick course on variable handling? Thanks guys, I know you are the best!

Answer 1

The simplest option is to define your function to take a parameter:

function ckbmovestate(element) {
    $(element).css("-webkit-transform", "translate(53px, 0px)")
}

You can then call this with ckbmovestate(this) from your code.

---

If you really want to be able to use the this keyword within a function when it’s called, you can do so. It’s not worth it here, but there may come a time when you want to do this. To achieve this, you need to make use of call or apply. Here, either would work:

ckbmovestate.call(someElement);

This sends the value of someElement to ckbmovestate. Inside ckbmovestate, you will be able to access the value using the keyword this. So in you code above, the following call would work:

ckbmovestate.call(this);

This is almost certainly overcomplicating things for this situation, however — much easier to define a parameter.