Repeating jQuery condensed using a common id -


so, have following simple jquery common id="private_menu_" used. way condense repeating 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> 

all when anchor clicked, shows selected div , hide else. works fine wanted make clean.

thanks

seperate selectors comma , use attribute starts with selector

 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>


Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -