jQuery Two functions, same result, same element

Question

I have two jQuery functions on same element with same result. Is there a way to have a shorter code:

$(document).ready(function(){
    $('#task_<?php echo $var_t; ?>').dblclick(function(){
        if($('#taskd_<?php echo $var_t; ?>').is(':visible')){
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
        }else{
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
            $('#taskd_<?php echo $var_t; ?>').show();
            $('#task_<?php echo $var_t; ?>').addClass('t_ar');
        }
    })
    $('#td_arrow_down_<?php echo $var_t; ?>').click(function(){
        if($('#taskd_<?php echo $var_t; ?>').is(':visible')){
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
        }else{
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
            $('#taskd_<?php echo $var_t; ?>').show();
            $('#task_<?php echo $var_t; ?>').addClass('t_ar');
        }
    });
});

Khamidulla · Accepted Answer · 2013-12-28 14:06:12Z

2

Yes it is possible. It is pretty simple you should create function and gave this function as input variable to event handler function. (i.e. .dbclick(), .click() and etc.). Since function also object in javasript.

$(document).ready(function(){
    $('#task_<?php echo $var_t; ?>').dblclick(do_action_name);
    $('#td_arrow_down_<?php echo $var_t; ?>').click(do_action_name);

    function do_action_name()
    {
        if($('#taskd_<?php echo $var_t; ?>').is(':visible'))
        {
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
        }
        else
        {
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
            $('#taskd_<?php echo $var_t; ?>').show();
            $('#task_<?php echo $var_t; ?>').addClass('t_ar');
        }
    }

});

edited Dec 28, 2013 at 14:06

answered Dec 28, 2013 at 13:43

Khamidulla

2,9736 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Val Over a year ago

I must admit I saw something similar but I still don't know how to do it in this case.

Decent Dabbler Over a year ago

The parentheses should be removed: .dblclick(do_action_name); and .click(do_action_name);, otherwise you pass the result of do_action_name(), in stead of the function itself, to the event handlers.

Val Over a year ago

Yeap, that's it. My bad part was I created my function outside of document ready. Or who knows why... but it was not working. Now it is. Thank you! Voted up!

Satpal · Accepted Answer · 2013-12-28 13:59:09Z

2

Create a function and bind it

$(document).ready(function(){
    function myFunction(){
        if($('#taskd_<?php echo $var_t; ?>').is(':visible')){
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
        }else{
            $('.tlistd').hide();
            $('.tlist').removeClass('t_ar');
            $('#taskd_<?php echo $var_t; ?>').show();
            $('#task_<?php echo $var_t; ?>').addClass('t_ar');
        }
    }
    $('#task_<?php echo $var_t; ?>').dblclick(myFunction);
    $('#td_arrow_down_<?php echo $var_t; ?>').click(myFunction);
});

edited Dec 28, 2013 at 13:59

answered Dec 28, 2013 at 13:45

Satpal

134k13 gold badges168 silver badges171 bronze badges

1 Comment

Val Over a year ago

there is a semicolon after the first call

Collectives™ on Stack Overflow

jQuery Two functions, same result, same element

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related