1
\$\begingroup\$

My tooltip works fine, but I need to simplify this code.

var genderSelect = {

  getGenderSelect: function () {
    if(this.val('Girl')){
      $(this).find('#girl-character').show();
      $(this).find('#boy-character').hide();
    }else if(this.val('Boy')){
      $(this).find('#boy-character').show();
      $(this).find('#girl-character').hide();
    }
  },

  init: function(){
    $('.control-label input[name="gender"]').change(
      $('#caracters').show();
      genderSelect.getGenderSelect();
  )};

};

genderSelect.init();
|improve this question|||||
\$\endgroup\$
  • 1
    \$\begingroup\$ Welcome to Code Review! This question is incomplete. To help reviewers give you better answers, please add sufficient context to your question. The more you tell us about what your code does and what the purpose of doing that is, the easier it will be for reviewers to help you. See also this meta question. \$\endgroup\$ – SuperBiasedMan Nov 3 '15 at 9:41
  • \$\begingroup\$ If #girl-character is unique on the page (and it should be given that it is an id), you don't need $(this).find('#girl-character'), just do $('#girl-character'). Likewise for #boy-character. \$\endgroup\$ – user5325596 Nov 3 '15 at 10:33
1
\$\begingroup\$

You can shorten the getGenderSelect function like this:

var genderSelect = {

  getGenderSelect: function () {
    $(this).find('#girl-character').toggle(this.val() == 'Girl');
    $(this).find('#boy-character').toggle(this.val() == 'Boy');    
  },

  init: function(){
    $('.control-label input[name="gender"]').change(
      $('#caracters').show();
      genderSelect.getGenderSelect();
  )};

};

genderSelect.init();

The toggle function takes a boolean which determines whether to show or hide the selected elements.

|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.