Оптимизировать код в jQuery

257

12 февраля 2017, 12:20

Есть рабочий код в jQuery, который, как мне кажется, можно оптимизировать за счет условий if и else. Тем не менее, у меня не получилось это сделать, надеюсь на вашу помощь. Пример кода:

$(document).ready(function() { 
  $("#female").click(function() { 
    $("#showFemale").show(); 
    $("#showMale").hide(); 
    $("#who").hide(); 
  }); 
}); 
$(document).ready(function() { 
  $("#male").click(function() { 
    $("#showMale").show(); 
    $("#showFemale").hide(); 
    $("#who").hide(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="showFemale">showFemale</div> 
<div id="showMale">showMale</div> 
<div id="who">who</div> 
<button id="female" val="female">female</button> 
<button id="male" val="male">male</button>

Answer 1

Как то так

$("#female").click(function() { 
       toggleIds(true); 
      }); 
$("#male").click(function() { 
     toggleIds(false); 
    }); 
 
var toggleIds = function(show){ 
        $("#showFemale").toggle(show); 
        $("#showMale").toggle(!show); 
        $("#who").hide(); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="showFemale">showFemale</div> 
<div id="showMale">showMale</div> 
<div id="who">who</div> 
<button id="female" val="female">female</button> 
<button id="male" val="male">male</button>

Answer 2

По мотивам @Moonvvell

$("#male, #female").click(function() { 
  var isMale = this.id === "male"; 
  $("#showFemale").toggle(!isMale); 
  $("#showMale").toggle(isMale); 
  $("#who").hide(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="showFemale">showFemale</div> 
<div id="showMale">showMale</div> 
<div id="who">who</div> 
<button id="female" val="female">female</button> 
<button id="male" val="male">male</button>