javascriptでのhide,blockの判定　while文を用いたもの

お世話になっております。
今回はwhile文にて、処理がフリーズしてしまっている原因について教えていただきたく思い質問させていただきます。
javascript

$("#category").change(function(){
	var h=$(this).val();
	var select_value = "#"+h+"selecter";
	$(select_value).fadeIn(500).css("display","flex");
	var i = 2015;
	while(i<2020){
		if(i==select_value){
			continue;
		}
		var select_i = "#"+i+"selecter";
		$(select_i).fadeOut(500);
	}
});

HTML

<label for="category" class="select-wrap entypo-down-open-mini">
	<select name="" id="category" style="text-align: center;">
		<option value="2019" selected id="2019">2019年度</option>
		<option value="2018" id="2018">2018年度</option>
		<option value="2017" id="2017">2017年度</option>
		<option value="2016" id="2016">2016年度</option>
	</select>
</label>

<div id="2019selecter" class="youtube_frame_base" style="display: flex;">
		<iframe src="https://www.youtube.com/....." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="youtube"></iframe>
			
</div>
<div id="2018selecter" class="youtube_frame_base" style="display: flex;">
		<iframe src="https://www.youtube.com/....." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="youtube"></iframe>
			
</div>

やりたいこと
labelで選択されたoptinのvalueの値をjavascript内で処理を行います。
valueの値であるIDのdiv要素をflexにて表示させ、それ以外のdiv要素をhidenで隠したいと考えています。
しかし、optionをクリック時に、ブラウザが停止し全く動作しなくなります。

考えられる要因として無限ループしているのでは無いかと考えています。
どの部分が間違っているかご教授いただければと思います。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

ループ（while）の中でi++;が抜けているのではないでしょうか？？

javascript
1$("#category").change(function(){
2    var h=$(this).val();
3    var select_value = "#"+h+"selecter";
4    $(select_value).fadeIn(500).css("display","flex");
5    var i = 2015;
6    while(i<2020){
7        if(i==select_value){
8            continue;
9        }
10        var select_i = "#"+i+"selecter";
11        $(select_i).fadeOut(500);
12        i++;
13    }
14});
15
16// 追記分
17$("#category").change(function(){
18    var i = 2015;
19    while(i<2020){
20        var select_i = "#"+i+"selecter";
21        $(select_i).fadeOut(500);
22        i++;
23    }
24
25    var h=$(this).val();
26    var select_value = "#"+h+"selecter";
27    $(select_value).fadeIn(500).css("display","flex");
28});
29

投稿2019/04/22 07:55

編集2019/04/23 02:29

mayoi_maimai

総合スコア1583

kuroishi

2019/04/22 08:39

ご回答いただきありがとうございます！大切なものを忘れてました… 一点追加で質問させていただきたいのですが、optionで選択したvalueを使っているselect_valueなんですが、これだとselect_valueが一瞬現れ消えてしまいます。continue で select_valueだけfade_outさせないようにしようかと思ったのですが消えてしまいます。どのような改善案があるでしょうか。よろしくお願いします。