【jQuery】select要素で条件分岐

ワードプレスのプラグイン「Google Language Translator」を使っていて、日本語以外では非表示にしたい画像(とか要素とか)があったので、jQueryで切り替えました。結構手こずったのでメモ。

黄色の文字の部分はhtmlに直書き+ワードプレスでjQueryを使うときに必要。

<script>
jQuery(function($){
	
	//画面が切り替わったとき
	setTimeout(function () {
		var lang = document.documentElement.getAttribute('lang') ;
		if(lang == "ja") {
			$('.jponly').css('display', 'block');
		} else{
			$('.jponly').css('display', 'none');
		}
	}, 1000);
	
	//セレクトボックスを操作したとき
	$(document).on('change', 'select.goog-te-combo', function() {
		var val = $("select.goog-te-combo").val();
		if(val == "ja") {
			$('.jponly').css('display', 'block');
		} else{
			$('.jponly').css('display', 'none');
		}
	});
	
});
</script>
  • 切り替えたい要素に「jponly」クラスをつける。
  • 「Google Language Translator」で言語選択のセレクトボックスを表示していたので、それに合わせて切り替える。
  • 画面が切り替わったときはhtmlタグのlang属性を読み込む。

画面が切り替わったときは、Google Language Translatorで読み込み後にlang属性が変更されるから、遅らせて動かしてるけどスマートじゃないね…と思いつつ…

● ● ●

以下は改良前のもの。画面が切り替わったときもセレクトボックスの値を読み込んでるけど、うまく動作しなかった。

<script>
jQuery(function($){
	
	//画面が切り替わったとき
	$(function() {
		var val = $("select.goog-te-combo").val();
		if(val == "ja") {
			$('.jponly').css('display', 'block');
		} else{
			$('.jponly').css('display', 'none');
		}
	});
	
	//セレクトボックスを操作したとき
	$(document).on('change', 'select.goog-te-combo', function() {
		var val = $("select.goog-te-combo").val();
		if(val == "ja") {
			$('.jponly').css('display', 'block');
		} else{
			$('.jponly').css('display', 'none');
		}
	});
	
});
</script>
  • $().change(function() {〜}); では動かなかったので、$(document).on(‘change’, ”, function() {〜}); に。

Google Language Translator、有料版を使ったらこういう機能もついてるのかな…?