将变量发送到另一个 function

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.

Answer 2

because you don't accept an argument in ckbmovestate

your ckbmovestate function should look like this if you don't want to change too much of your code:

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

If you often use the ckbmovestate function, I suggest you make your own little plugin of it, which you do like this;

$.fn.ckbmovestate = function(){
$(this).each(function(){
   $(this).css("-webkit-transform", "translate(53px, 0px)");
});
}

than, in the jquery each loop in your code in the question, you can write this:

 $('fieldset:has(:checkbox:checked)').each(function(){
        $(this).find('.switch').attr('data-state', 'on')
               .ckbmovestate();
    });

Answer 3

Change the function to use a parameter.

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