Повторение jQuery, сконденсированного с использованием общего идентификатора

Question

Итак, у меня есть следующий простой jQuery, где используется общий id="private_menu_". Что было бы хорошим способом сконденсировать этот повторяющийся jQuery?

<a href="#private_menu_address" id="address">Menu 1</a> 
<a href="#private_menu_name" id="name">Menu 2</a> 
<a href="#private_menu_country" id="country">Menu 3</a> 
<a href="#private_menu_email" id="email">Menu 4</a> 

<div id="private_menu_address">address</div> 
<div id="private_menu_name"> name</div> 
<div id="private_menu_country">country</div> 
<div id="private_menu_email">email</div> 

<script> 
jQuery("#address").click(function() {  
    jQuery('#private_menu_address').show(); 
    jQuery('#private_menu_name').hide(); 
    jQuery('#private_menu_country').hide(); 
    jQuery('#private_menu_email').hide();  
    }); 
jQuery("#name").click(function() {  
    jQuery('#private_menu_address').hide(); 
    jQuery('#private_menu_name').show(); 
    jQuery('#private_menu_country').hide(); 
    jQuery('#private_menu_email').hide();  
    }); 
jQuery("#country").click(function() {  
    jQuery('#private_menu_address').hide(); 
    jQuery('#private_menu_name').hide(); 
    jQuery('#private_menu_country').show(); 
    jQuery('#private_menu_email').hide();  
    }); 
jQuery("#email").click(function() {   
    jQuery('#private_menu_address').hide(); 
    jQuery('#private_menu_name').hide(); 
    jQuery('#private_menu_country').hide(); 
    jQuery('#private_menu_email').show();  
    }); 
</script> 

Все, что угодно, это то, что при щелчке якоря он отображает выбранный div и скрывает все остальное. Он отлично работает, но я просто хотел сделать его чистым.

Благодаря

Answer 1

отделите селекторы с запятой и использовать attribute starts with селектор

jQuery("#address,#name,#country,#email").click(function() { 
 
    var id = $(this).attr('id'); 
 
    jQuery('[id^="private_menu_"]').hide(); 
 
    jQuery('#private_menu_' + id).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="#private_menu_address" id="address">Menu 1</a> 
 
<a href="#private_menu_name" id="name">Menu 2</a> 
 
<a href="#private_menu_country" id="country">Menu 3</a> 
 
<a href="#private_menu_email" id="email">Menu 4</a> 
 

 
<div id="private_menu_address">address</div> 
 
<div id="private_menu_name">name</div> 
 
<div id="private_menu_country">country</div> 
 
<div id="private_menu_email">email</div>