CODEWITHSUNDEEP
jquery
tvalent2
tvalent2

Reputation: 5009

Simplifying jQuery by chaining mouse events

I wrote three jQuery functions to target a span: one for clicking on the span, one for tabbing on the span, and one for tabbing/clicking off the span. Since this is a lot of jQuery, I'd like to combine it if possible. So I'm wondering if anyone can help me figure out the best way to do so.

Focus on click:

$(function(){
  $("span#wanttobe").click(function(){
    $("span#wanttobe input").focus();
    $(this).css({
      "border":"1px solid #4D79FF",
      "outline":"none",
      "-webkit-box-shadow": "0 0 4px #4D79FF",
      "-moz-box-shadow": "0 0 4px #4D79FF",
      "box-shadow": "0 0 4px #4D79FF",
      "border-radius": "3px",
      "-moz-border-radius": "3px",
      "-webkit-border-radius": "3px"});
  });
});

Focus on tab:

$(function(){
  $("span#wanttobe").focusin(function(){
    $("span#wanttobe input").focus();
    $(this).css({
      "border":"1px solid #4D79FF",
      "outline":"none",
      "-webkit-box-shadow": "0 0 4px #4D79FF",
      "-moz-box-shadow": "0 0 4px #4D79FF",
      "box-shadow": "0 0 4px #4D79FF",
      "border-radius": "3px",
      "-moz-border-radius": "3px",
      "-webkit-border-radius": "3px"});
  });
});

Focus out:

$(function(){
  $("span#wanttobe").focusout(function(){
    $(this).css({
      "background": "#fff",
      "border": "1px solid #CCD9FF",
      "border-radius": "3px 3px",
      "-moz-border-radius": "3px 3px",
      "-webkit-border-radius": "3px 3px",
      "-moz-box-shadow": "inset 0 1px 2px rgba(0,0,0,.60)",
      "-webkit-box-shadow": "inset 0 1px 2px rgba(0,0,0,.60)",
      "box-shadow": "inset 0 1px 2px rgba(0,0,0,.60)"});
  });
});

Upvotes: 0

Views: 257

Answers (1)

alex
alex

Reputation: 490283

Change the click() to on('click focusin focusout').

This will bind the three events at once.

Upvotes: 1

Related Questions