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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

1883閲覧

jqueryコードを短く書きたいですが

rainbowsix

総合スコア102

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/08/02 09:31

編集2016/08/02 09:32

Javascript

1$(function() { 2 3 $(".hoge").each(function(){ 4 if ($(this).val()==1){ 5 $(this).val("hoge"); 6 }else{ 7 $(this).val("moge"); 8 } 9 }); 10 11 $(".hoge").change(function(){ 12 if ($(this).val()==1){ 13 $(this).val("hoge"); 14 }else{ 15 $(this).val("moge"); 16 } 17 }); 18 });

js初心者です。
eachもchangeも中身は同じなので$(this)を含めてコードを短くする方法を教えてください。

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

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

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

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

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

guest

回答4

0

関数コードが同じなら関数宣言して2回呼び出せばいいでしょう。

HTML

1<select class="hoge"> 2 <option>1</option> 3 <option>2</option> 4 <option>hoge</option> 5 <option>moge</option> 6</select> 7 8<script> 9'use strict'; 10jQuery(function (jQuery) { 11 function handleChange (event) { 12 this.value = this.value === '1' ? 'hoge' : 'moge'; 13 } 14 15 jQuery('.hoge').each(handleChange).on('change', handleChange); 16});

ただ、異なる関数を一つにまとめると、共通性のない拡張を加える際に再び関数を分割する事になって管理性が落ちるので、私であれば2つの関数を書きます。

JavaScript

1jQuery(function (jQuery) { 2 jQuery('.hoge').val(function (i, value) { 3 return value === '1' ? 'hoge' : 'moge'; 4 }).on('change', function handleChange (event) { 5 var currentTarget = event.currentTarget; 6 currentTarget.value = currentTarget.value === '1' ? 'hoge' : 'moge'; 7 }); 8});

素朴な疑問ですが、このコードではユーザが 'hoge' をセットした場合に 'moge' に上書きされますが、期待通りの動作なのでしょうか。
普通に考えると select の選択肢を hoge, moge の2つにするだけでJavaScriptコードを書かずとも解決するのですが…。

Re: rainbowsix さん

投稿2016/08/02 11:08

編集2016/08/02 11:21
think49

総合スコア18156

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

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

0

ベストアンサー

javascript

1$(function () { 2 $(".hoge").on('change', function () { 3 if ($(this).val() == 1) { 4 $(this).val("hoge"); 5 } else { 6 $(this).val("moge"); 7 } 8 }).change(); 9});

投稿2016/08/02 09:36

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

think49

2016/08/02 11:11

jQuery#val() の返り値は String 型なので全てのケースで "moge" が代入されてしまいます…。
退会済みユーザー

退会済みユーザー

2016/08/02 11:22

=== で比較するとそうなりますね
think49

2016/08/02 11:46

ああ、なるほど。厳密比較でないので大丈夫なんですね。失礼しました。
rainbowsix

2016/08/04 07:37

超高速回答ありがとうございます!
guest

0

楽しいね!w

Javascript

1$(function () { 2 $(".hoge").change(function () { 3 this.value = this.value == 1 ? 'hoge' : 'moge'; 4 } 5 ); 6});

投稿2016/08/02 09:58

ToniVaquer

総合スコア146

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

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

kei344

2016/08/02 10:08

.change() が抜けていませんか?
ToniVaquer

2016/08/02 10:17

そうですね、ありがとう! 削りすぎてた
think49

2016/08/02 11:13

this.value は String 型なので全てのケースで "moge" が代入されてしまいます。valueAsNumber なら Number 型になります。
ToniVaquer

2016/08/02 11:25

もっとかんたんにすると this.value == '1'
guest

0

javascript

1$(function () { 2 $(".hoge").on('change', function () { 3 $(this).val($(this).val() == 1 ? "hoge" : "moge"); 4 }).change(); 5});

投稿2016/08/02 09:50

編集2016/08/04 08:18
moonphase

総合スコア6621

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

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

kei344

2016/08/04 08:26 編集

「}」が1つ多いと思います。⇒ 編集ありがとうございます。
think49

2016/08/02 11:46 編集

jQuery#val() の返り値は String 型なので全てのケースで "moge" が代入されてしまいます…。 ⇒厳密比較でないので問題ありませんでした。失礼しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問