【 jQuery 】ie10にて、特定の要素内に含まれるオブジェクトの取り方が異なる問題について。

Question

特定のClass名を軸に、要素内に割り振られたキーワード同士を紐付け、それらを開閉させる動きを作っています。おおよそのブラウザで想定通りの動きをしているのですが、IE10のみエラーが表示されてしまい動作しません。

どなたか分かる方いらっしゃいましたら、問題点と解決法を教えていただきたく存じます。

【 動きの説明 】
［ lcSwitch ］というClass内にて［ lcSwitchCause ］というClass名を拾い、同じ要素にある独自data属性の値と紐付け、対象となる［ lcSwitchEffect ］を開閉しています。

また、対象があった場合に初期状態を非表示にさせています。

<div class="lcSwitch">
	<div class="lcSwitchCause" data-lcSwitch="1"> … </div>
	<div class="lcSwitchCause" data-lcSwitch="2"> … </div>
	<div class="lcSwitchCause" data-lcSwitch="3"> … </div>

	<div class="lcSwitchEffect1"> … </div>
	<div class="lcSwitchEffect2"> … </div>
	<div class="lcSwitchEffect3"> … </div>
</div>

jQuery('.lcSwitch').each(function() {
	var lcSwitch = jQuery(this);

	jQuery(this).find('.lcSwitchCause').each(function() {
		var lcSwitchN = jQuery(this).attr('data-lcSwitch');
		var lcSwitchEffectN = 'lcSwitchEffect' + lcSwitchN;

		jQuery(lcSwitch).find('.' + lcSwitchEffectN).each(function() {
			if(jQuery(this).show()) {
				jQuery('[class*=lcSwitchEffect]').hide();
			} else {
				jQuery('[class*=lcSwitchEffect]').show();
			}
		});

		jQuery(this).on('click', function() {
			jQuery(lcSwitch).find('.' + lcSwitchEffectN).toggle();
	
			return false;
		});

	});
});

私的に検証した結果では、下記部分にてエラーが生じているようです。
each前で取得しているものが、IE10と、その他ブラウザで異なっているようなのですが、解決方法が分かりません。。

jQuery(lcSwitch).find('.' + lcSwitchEffectN).each(function() {
	if(jQuery(this).show()) {
		jQuery('[class*=lcSwitchEffect]').hide();
	} else {
		jQuery('[class*=lcSwitchEffect]').show();
	}
});

どうぞ、宜しくお願い致します。

Answer 1

Chorome, Firefox, IE11では発生しなかったので環境依存かと思います。
IE10の環境がないため検証できませんでしたが、考えられるとするとlcSwitchがjQueryオブジェクトのためjQuery(lcSwitch)でエラーになっているのかもしれません。
以下のように変えるとどうでしょう？

- jQuery(lcSwitch).find('.' + lcSwitchEffectN).each(function() {
+ lcSwitch.find('.' + lcSwitchEffectN).each(function() {

---

if(jQuery(this).show())
この記述ですが、show()の戻り値を見る意味はないように思います。
jQueryオブジェクトが返るので、つねに真になります。

---

要件の認識があいまいですが、少し書き直してみました。

jQuery('.lcSwitch').each(function() {
	var $lcSwitch = jQuery(this);

	$lcSwitch.find('[class*=lcSwitchEffect]').show();

	$lcSwitch.find('.lcSwitchCause').each(function() {
		var lcSwitchN = jQuery(this).attr('data-lcSwitch');
		var lcSwitchEffectN = 'lcSwitchEffect' + lcSwitchN;

		$lcSwitch.find('.' + lcSwitchEffectN).each(function() {
			jQuery(this).hide();		// 一致したものだけ隠す？
		});

		jQuery(this).on('click', function() {
			$lcSwitch.find('.' + lcSwitchEffectN).toggle();

			return false;
		});

	});
});

Comments

[SOorXTC]

ご返答ありがとうございます！無事解決致しました。

Answer 2

最初のjQueryは必要ないかと思うのですが、いかかがでしょう。

lcSwitch.find('.' + lcSwitchEffectN).each(function() {
    if(jQuery(this).show()) {
        jQuery('[class*=lcSwitchEffect]').hide();
    } else {
        jQuery('[class*=lcSwitchEffect]').show();
    }
});

Comments

[SOorXTC]

ご返答ありがとうございます。
［ . lcSwitch ］を軸に、ページ内で使い回せるものをと考えておりましたので、最初の記述も必要なものでした。説明が足りずすみません。