I'm sure there is a less redundant way to do this

JavaScript
1

I’ve got three languages on my website, and I hide/show the appropriate language on click… Each div containing content is labeled with a class for that language, but I’m just wondering if there is a more streamline way to write the hide/shows, like with a loop or switch statement or something…

Thoughts? This way just seems too redundant. here is my code:

jQuery( document ).ready(function( $ ) {
			$(".tr-chinese").click(function() {
				$(".chinese").show();
				$(".english").hide();
				$(".german").hide();
			});
			$(".tr-german").click(function() {
				$(".german").show();
				$(".chinese").hide();
				$(".english").hide();
			});
			$(".tr-english").click(function() {
				$(".english").show();
				$(".chinese").hide();
				$(".german").hide();
			});
			
			
			
			
		});

Then divs would be like

<div class="english">Some text</div> <div class="chinese"> Some chinese text</div> <div class="german"> Some German text</div>

Thoughts? Suggestions?

2

First off, but it just before </body> instead of in the <head> so you can do away with jQuery( document ).ready(function( $ ) {....});
And then you can simply do:


$('.tr-chinese, .tr-german, .tr-english').on('click', function() {
    $('.chinese, .german, .english').hide();
    var language = '.' + $(this).attr('class').replace(/^tr-/, '');
    $(language).show();
});

See http://jsfiddle.net/ for a demo :slight_smile:

3

Awesome! I knew there was a way. Thank you!

4

No problem. Let me know if you have any questions about how it works :slight_smile:

5

Or… you could give them all a unique class name, hide all of them ($(‘.className’).hide()), then use $(this).show() for the one. Just my $0.0347 worth. (Inflation, dontchaknow.)

6

[ot]

That made me laugh.[/ot]

7

AH! Increasing my notification count, again! CURSES!

:slight_smile: