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

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

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

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

Q&A

解決済

3回答

3938閲覧

【 jQuery 】共通の文字列で紐付けた要素から、更に一致した要素を連動させる方法

SOorXTC

総合スコア10

jQuery

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

0グッド

0クリップ

投稿2016/03/02 02:48

編集2016/03/28 05:51

指定の[ Class ]から選択されたvalue値を、紐付けられた要素に[ Class ]としてして与えるプログラムを組んでいます。
下記は現在書いたもので意図する動きをしているのですが、これを拡張しようとした際につまずいてしまいました。

html

HTML

1<select class=“Cauce”> 2 <option value=“Sample1”>Sample1</option> 3 <option value=“Sample2”>Sample2</option> 4</select> 5 6<div class=“Effect”> … </div>

jQuery

javascript

1$([class*=Cauce]').change(function() { 2 $(this).children('option').each(function() { 3 var CurrentValue = jQuery(this).val(); 4 $('[class*=Effect]').removeClass(CurrentValue); 5 }); 6 7 var SelectValue = jQuery(this).children('option:selected').text(); 8 $('[class*=Effect]).addClass(SelectValue); 9});

上記を、下記のようなhtmlにてClass名[ Cause1 ]で選択された値をClass名[ Effect1 ]へ、Class名[ Cause2 ]で選択された値はClass名[ Effect2 ]へ…という形に変更したいと考えています。

html

html

1<select class=“Cauce1”> 2 <option value=“Sample1”>Sample1</option> 3 <option value=“Sample2”>Sample2</option> 4</select> 5<select class=“Cauce1”> 6 <option value=“Sample1”>Sample1</option> 7 <option value=“Sample2”>Sample2</option> 8</select> 9<select class=“Cauce2”> 10 <option value=“Sample1”>Sample1</option> 11 <option value=“Sample2”>Sample2</option> 12</select> 13<select class=“Cauce3”> 14 <option value=“Sample1”>Sample1</option> 15 <option value=“Sample2”>Sample2</option> 16</select> 17<select class=“Cauce3”> 18 <option value=“Sample1”>Sample1</option> 19 <option value=“Sample2”>Sample2</option> 20</select> 21<select class=“Cauce3”> 22 <option value=“Sample1”>Sample1</option> 23 <option value=“Sample2”>Sample2</option> 24</select> 25 26<div class=“Effect1”></div> 27<div class=“Effect2”></div> 28<div class=“Effect3”></div>

これをJQuery及びJavascriptで解決する方法をご教授いただければと思います。
宜しくお願い申し上げます。

*[ Cauce ][ Effect ]という共通の文字列でそれぞれを紐付け、その後ろに任意に割り当てた数字が一致するもの同士で動作させたいと考えています。

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

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

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

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

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

guest

回答3

0

changeイベント時にeachメソッドを毎回実行しているのが気になりましたので。
事前につけ外しをするクラスのリストアップを済ませておけば、イベント時には下記のchangeClassで行う処理だけに単純化できます。

javascript

1changeClass: function() { 2 var className = this.$select.val(); 3 this.$target.removeClass(this.selectClassNameAll).addClass(className); 4}

サンプルコード

カスタムデータ属性を利用します。data-cause="1"data-effect="1"がそれぞれ対応します。
なので、クラス名はCauseとEffectに共通化しています(クラスに番号を振る必要がないので)

html

1<select class="Cause" data-cause="1"> 2 <option value="Sample1">Sample1</option> 3 <option value="Sample2">Sample2</option> 4</select> 5 6<select class="Cause" data-cause="2"> 7 <option value="hoge1">hoge1</option> 8 <option value="hoge2">hoge2</option> 9 <option value="test1">test1</option> 10 <option value="test2">test2</option> 11</select> 12 13<select class="Cause" data-cause="3"> 14 <option value="piyo1">piyo1</option> 15 <option value="piyo2">piyo2</option> 16</select> 17 18<select class="Cause" data-cause="4"> 19 <option value="abc">abc</option> 20 <option value="def">def</option> 21</select> 22 23<div class="Effect" data-effect="1"></div> 24<div class="Effect" data-effect="2"></div> 25<div class="Effect" data-effect="3"></div> 26<div class="Effect" data-effect="4"></div>

JS側では、カスタムデータ属性で取得とグループ化を行います。
ロード時に事前処理は全て済ませるので、イベント時には事前処理に基づいたクラスの付け替えを行うだけで良いです。

javascript

1var changeSelectClass = function(selector) { 2 this.$select = $(selector); 3 this.init(); 4}; 5 6changeSelectClass.prototype = { 7 init: function() { 8 this.number = this.$select.data('cause'); //カスタムデータ属性の番号を取得 9 this.$option = this.$select.find('option'); 10 this.selectClassList = this.getClassList(); // 対応するselect内のクラス名を配列として取得 11 this.selectClassNameAll = this.selectClassList.join(' '); // removeClassで使う形にするために間に半角スペースを入れて結合。 12 this.$targetAll = $('[data-effect]'); 13 this.$target = this.getTarget(this.number); // クラスを付け替えるターゲットの取得 14 15 this.bindEvent(); 16 }, 17 getClassList: function() { 18 var result = [].map.call(this.$option, function(item, index) { 19 return $(item).val(); 20 }); 21 22 return result; 23 }, 24 getTarget: function(number) { 25 var $target = this.$targetAll.filter(function() { 26 return $(this).data('effect') === number; 27 }); 28 29 return $target; 30 }, 31 bindEvent: function() { 32 var _self = this; 33 34 this.$select.on('change', function() { 35 _self.changeClass(); 36 }); 37 }, 38 changeClass: function() { 39 var className = this.$select.val(); 40 this.$target.removeClass(this.selectClassNameAll).addClass(className); 41 } 42}; 43 44$('[data-cause]').each(function() { 45 new changeSelectClass(this); 46});

投稿2016/03/06 13:25

編集2016/03/06 13:30
yamato_hikawa

総合スコア2092

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

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

0

自己解決

jQuery('[class^=lcSwitchValueCauce]').on('change', function() {
var CauceS = jQuery(this).attr('class').replace('lcSwitchValueCauce','');
var EffectS = jQuery('.lcSwitchValueEffect' + CauceS);

jQuery(this).children('option').each(function() { var CurrentValue = jQuery(this).val(); EffectS.removeClass(CurrentValue); }); var SelectValue = jQuery(this).children('option:selected').text(); EffectS.addClass(SelectValue);

});

投稿2016/03/02 08:39

SOorXTC

総合スコア10

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

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

0

直接関係なくて恐縮ですが、

js

1.change(function() {

js

1.on('change', function () {

のほうがモダンな書き方です。

あと、
selectタグで選択されてるoptionは、
セレクタにoption:selectedと書くと拾えますよ。

投稿2016/03/02 02:56

ogaaaan

総合スコア765

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

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

ogaaaan

2016/03/02 03:01 編集

回答というか提案ですが、 CurrentValue を連想配列にすればいいじゃないですかね。 ```js var c = $(this).attr('class'); CurrentValue[c] = $(this).val(); ``` 的な感じで。 ($はJQueryの省略形です。)
SOorXTC

2016/03/02 08:39

記述についてのご指摘、ありがとうございます! 少し違った方法になってしまいましたが、無事に解決しました。
ogaaaan

2016/03/02 08:40

イイネ!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問