как оптимизировать этот код javascript?

Question

Как оптимизировать эти функции? Могу ли я сделать одну функцию для всех операций?

$('#b-hat1').click(function() { 
 
    $('#hat3').hide(); 
 
    $('#hat2').hide(); 
 
    $('#hat1').show(); 
 
}); 
 
$('#b-hat2').click(function() { 
 
    $('#hat3').hide(); 
 
    $('#hat2').show(); 
 
    $('#hat1').hide(); 
 
}); 
 
$('#b-hat3').click(function() { 
 
    $('#hat3').show(); 
 
    $('#hat2').hide(); 
 
    $('#hat1').hide(); 
 
});

Answer 1

Без вашего HTML, я могу только дать вам "rought" идею о том, как ее решить.

$("div[id^='hat']").hide(); скрывает все Div, начинающегося с hat

$('div[id^="b-hat"]').click(function() { 
 
    var id = $(this).attr("id").replace("b-",""); 
 
    $("div[id^='hat']").hide(); 
 
    $('#' + id).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hat1">hat1</div> 
 
<div id="hat2">hat2</div> 
 
<div id="hat3">hat3</div> 
 
<br><br> 
 

 
<div id="b-hat1">Show hat1</div> 
 
<div id="b-hat2">Show hat2</div> 
 
<div id="b-hat3">Show hat3</div>

Answer 2

Покажет DIV только после нажатия на определенной кнопке DEMO:

$(document).ready(function(){ 
 
$(".hat").hide(); 
 
    $(".clickMe").on("click",function(){ 
 
     var showDiv = $(this).data("id");  
 
     $(".hat").hide(); 
 
     $("#hat_"+showDiv).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button class="clickMe" data-id="1" type="button">1</button> 
 
<button class="clickMe" data-id="2" type="button">2</button> 
 
<button class="clickMe" data-id="3" type="button">3</button> 
 

 
<div id="hat_1" class="hat">hat_1</div> 
 
<div id="hat_2" class="hat">hat_2</div> 
 
<div id="hat_3" class="hat">hat_3</div>