質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1660閲覧

javascriptがうまく動いてくれません

amakusa

総合スコア176

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/07/06 02:04

編集2015/07/06 02:26

現在、言語の設定をしているのですが、javascriptがうまく動いてくれません。
どこか間違っている箇所があるとは思うのですが、どこでしょうか。どなたか教えてください。宜しくお願いします。

ちなみにindex.htmlの方では言語がまだ選択されていない場合は、japaneseを選択している状態にしたいと思っています。

lang

1$('[name=example]').change(function() { 2 // 選択されているvalue属性値を取り出す 3 var lan = $('[name=example]').val(); 4 console.log(lan); // 出力:ABC 5 // 選択されている表示文字列を取り出す 6 if(lan == ja){ 7 console.log('ja'); 8 $('.ja').css("display",""); 9 $('.lang').css("display","none"); 10 }else if(lan == en){ 11 $('.en').css("display",""); 12 $('.lang').css("display","none"); 13 }else if(lan == ch){ 14 $('.ch').css("display",""); 15 $('.lang').css("display","none"); 16 }else if(lan == fr){ 17 $('.fr').css("display",""); 18 $('.lang').css("display","none"); 19 }else if(lan == es){ 20 $('.es').css("display",""); 21 $('.lang').css("display","none"); 22 }else if(lan == de){ 23 $('.de').css("display",""); 24 $('.lang').css("display","none"); 25 }else if(lan == ru){ 26 $('.ru').css("display",""); 27 $('.lang').css("display","none"); 28 }else if(lan == ar){ 29 $('.ar').css("display",""); 30 $('.lang').css("display","none"); 31 }else if(lan == vn){ 32 $('.vn').css("display",""); 33 $('.lang').css("display","none"); 34 }else if(lan == in){ 35 $('.in').css("display",""); 36 $('.lang').css("display","none"); 37 }else if(lan == bd){ 38 $('.bd').css("display",""); 39 $('.lang').css("display","none"); 40 }else if(lan == pt){ 41 $('.pt').css("display",""); 42 $('.lang').css("display","none"); 43 }else{ 44 $('.lang').css("display","none"); 45 } 46});

lang

1 <form> 2 <select name="example" id="language"> 3 <option value="ja">Japanese</option> 4 <option value="en">English</option> 5 <option value="ch">Chinese</option> 6 <option value="fr">French</option> 7 <option value="es">Spanish</option> 8 <option value="de">German</option> 9 <option value="ru">Russian</option> 10 <option value="ar">Arabic</option> 11 <option value="vn">Vietnamese</option> 12 <option value="in">Hindi</option> 13 <option value="bd">Bengali</option> 14 <option value="pt">Portuguese</option> 15 </select> 16 </form>

また、実際に表示するところのclassはこうしてあります。

lang

1<div class= lang ja> 2 3</div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

==のあとで比較するものが、このままだと「その名前の変数」になっていて、存在しないのでうまく動きません。'ja''es'のように引用符でくくって文字列としましょう。

投稿2015/07/06 02:08

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

amakusa

2015/07/06 02:17

回答ありがとうございます! ''を追加して更新してみたのですが、まだうまくいかないです;;
guest

0

ベストアンサー

同じ要素のclassにlangとjaとか言語のクラス名をつけてるんですね、
では、

$('.lang').css("display","none"); $('.ja').css("display","");

みたいに、最初に消しとかないと後から全部消えてしまいますよ。

あと、
if分を使わずに、
if(lan == ja){
console.log('ja');
$('.ja').css("display","");
$('.lang').css("display","none");
}else if(lan == en){
..........................................................................
}
を全部取っ払って、
$('.lang').css("display","none");
$('.' + lang).css("display","");
にすれば、大分プログラムがすっきりすると思います。

投稿2015/07/06 02:41

hintrarou

総合スコア162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hintrarou

2015/07/06 02:53 編集

あと、class名はちゃんとダブルかシングルクォートでくくりましょう。 よくよく見てみたら、amakusaさんのやろうとされていることはこれだけで済んでしまいます。 $(function(){ $('#language').change(function(){ var lang = $(this).val(); $('.lang').css("display","none"); $('.' + lang).css("display",""); }); });
amakusa

2015/07/06 03:01

回答ありがとうございます! 上記のコードでなんとかうまくできました! ただ、デフォルトでまだ何も選択していない場合に、japaneseを表示したいのですが、それはどうしたらよろしいでしょうか><
hintrarou

2015/07/06 03:04

$(function(){ $('#language').change(function(){ var lang = $(this).val(); $('.lang').css("display","none"); $('.' + lang).css("display",""); }); $('.ja').css("display","") //これを追加 });
amakusa

2015/07/06 03:05

すみません!自己解決しました! $(function(){ $('.lang').css("display","none"); $('.ja').css("display",""); $('#language').change(function(){ var lang = $(this).val(); console.log(lang); $('.lang').css("display","none"); $('.' + lang).css("display",""); }); });
guest

0

var lan = $('[name=example]').val();
ですが、上記で取得できているでしょうか?

var lan = $("input:radio[name='example']:checked").val()
のようにした方がいいと思います。

また

<div class= lang ja> ですが、 <div class="lang ja"> ダブルコーテーションでくくられていません。

また、
$('.ja').css("display","");
$('.lang').css("display","none");

だと

<div class="lang ja"> の部分は非表示になります。

投稿2015/07/06 02:36

chiku_

総合スコア1464

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaputaros

2015/07/06 02:44

'[name=example]'のHTML要素はラジオボタンではなく、セレクトボックスだと思うのですが、、、。
amakusa

2015/07/06 03:00

回答ありがとうございます!
chiku_

2015/07/06 03:01

> '[name=example]'のHTML要素はラジオボタンではなく、セレクトボックスだと思うのですが、、、。 すいません、見間違いしていました。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問