CODEWITHSUNDEEP
javascriptjquery
styler
styler

Reputation: 16491

combining similar click handlers in order to reduce code being used in jquery?

I have 2 click events that go through a series of different actions, the only thing that is different between the 2 events though is 2 lines. Is there a way of combining these clicks in order to cut down the amount of code being used?

$('a.register').click(function() {
                $('h4#registerHead').addClass('active');
                $('#registerMessage').show();
                $('#nav li span a').css({'color':'#8F8F8F'});
                $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
            });

            $('a.subscribe').click(function() {
                $('h4#subscribeHead').addClass('active');
                $('#subscribeMessage').show();
                $('#nav li span a').css({'color':'#8F8F8F'});
                $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
            });

All advice welcome on this, and thanks.

Upvotes: 1

Views: 60

Answers (3)

Anthony DiSanti
Anthony DiSanti

Reputation: 514

Generalizing that function is very simple. This would be the easiest approach as I see it

function generateClickHandler(type) {
  return function() {
    $('h4#' + type + 'Head').addClass('active');
    $('#' + type + 'Message').show();
    $('#nav li span a').css({'color':'#8F8F8F'});
    $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
  };
}

$('a.register').click(generateClickHandler('register'));
$('a.subscribe').click(generateClickHandler('subscribe'));

Upvotes: 0

ValeriiVasin
ValeriiVasin

Reputation: 8706

The first way:

var doIt = function(event){
  $("h4#"+event.data.type+"Head").addClass('active');
  $("#"+event.data.type+"Message").show();
  $('#nav li span a').css({'color':'#8F8F8F'});
  $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
};

$('a.register').bind('click', {type: 'register'}, doIt);
$('a.subscribe').bind('click', {type: 'subscribe', doIt});

Second way:

var commonHandler = function(){
  $('#nav li span a').css({'color':'#8F8F8F'});
  $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
};

$('a.register').click(function() {
  $('h4#registerHead').addClass('active');
  $('#registerMessage').show();
  commonHandler();
});

$('a.subscribe').click(function() {
  $('h4#subscribeHead').addClass('active');
  $('#subscribeMessage').show();
  commonHandler();
});

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532455

You could change it so that it depends on the structure of the document and the relative positioning of the elements within it. Obviously, this depends on your HTML. The following assumes that each link is contained within a DIV, that contains the non-common elements as well. Adapt it to your HTML, which may involve modifying the HTML to make it easier, as needed.

$('a.register, a.subscribe').click( function() {
     var $container = $(this).closest('div.container');
     $('h4',$container).addClass('active');
     $('.message',$container).show();
     $('#nav li span a').css({'color':'#8F8F8F'}); 
     $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
});

Example HTML:

<div class="container">
   <h4>Register</h4>
   <div id="registerMessage" class="message"></div>
   <div>
      <a href="#" class="register">Do it!</a>
   </div>
</div>
<div class="container">
   <h4>Subscribe</h4>
   <div id="subscribeMessage" class="message"></div>
   <div>
      <a href="#" class="subscribe">Do it!</a>
   </div>
</div>

Upvotes: 1

Related Questions