ifとelseの分岐が効かずにアラートがでません。
次のjavascriptは後述の抜粋でして、この部分のアラートがでないのです。
javascript
1 //チェックが2個未満のときのアラート 2 }else{ 3 alert('2個未満ですね'); 4 }
どうしたらelse以下の条件が効くようになるでしょうか?
(チェックが2個未満のときの条件分岐はどうやったらできるのか?)
ご教示いただけますと嬉しいです。
よろしくお願いいたします。
▼動くサンプル
https://jsfiddle.net/ojr8xrso/
▼そのコード
html
1<div class="check_wrap"> 2 <ul id="fluits_list"> 3 <li><input id="fluits_apple" class="check_fluits" name="check_fluits" value="apple" type="checkbox"> 4 <label for="fluits_apple" class="check_label"> 5 <span class="i apple damekamo"></span> 6 </label> 7 </li> 8 <li><input id="fluits_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox"> 9 <label for="fluits_grape" class="check_label"> 10 <span class="i grape damekamo"></span> 11 </label> 12 </li> 13 <li><input id="fluits_banana" class="check_fluits" name="check_fluits" value="banana" type="checkbox"> 14 <label for="fluits_banana" class="check_label"> 15 <span class="i banana daijobu"></span> 16 </label> 17 </li> 18 <li><input id="fluits_kiwi" class="check_fluits" name="check_fluits" value="kiwi" type="checkbox"> 19 <label for="fluits_kiwi" class="check_label"> 20 <span class="i kiwi daijobu"></span> 21 </label> 22 </li> 23 </ul> 24</div> 25 26<div class="output pink"> 27 <p><span id="output1"></span></p> 28 <p><span id="output2"></span></p> 29</div> 30 31<div class="output aqua"> 32 <p><span id="outputA"></span></p> 33 <p><span id="outputB"></span></p> 34</div> 35 36<div class="none" style="display:none;"> 37<p id="now_apple">appleを最初にチェックしたらダメです</p> 38<p id="now_grape">grapeを最初にチェックしたらダメです</p> 39<p id="now_banana">だいじょうぶです</p> 40<p id="now_kiwi">だいじょうぶです</p> 41</div> 42 43
javascript
1$(function(){ 2 3 ////チェックしたらピンクに画像をコピー 4 $('input[name=check_fluits]').change(function(){ 5 var clone=$(this).siblings().find('.i').clone(); 6 if($('input[name=check_fluits]:checked').length>2) { 7 $(this).prop("checked",false); 8 alert('チェックは2個までです'); 9 return false; 10 } 11 if($(this).prop('checked')){ 12 $('#output1,#output2').filter(function(){ 13 return $(this).html()==""; 14 }).eq(0).html(clone); 15 }else{ 16 console.log($.map(clone.prop('classList'),function(x){return "."+x;}).join("")); 17 $('#output1,#output2').has($.map(clone.prop('classList'),function(x){return "."+x;}).join("")).html(""); 18 } 19 }); 20 $('input[name=check_fluits]').prop('checked',false).filter('[value=apple],[value=banana]').prop('checked',true).trigger("change"); 21 22 ////チェックしたらアラート 23 $('input[name=check_fluits]').change(function(){ 24 25 //ピンクの画像を水色にコピー 26 var cmc_unit1 = $('#output1').html(); 27 $('#outputA').html(cmc_unit1); 28 var cmc_unit2 = $('#output2').html(); 29 $('#outputB').html(cmc_unit2); 30 31 //「.i」の次のクラス(.appleとか)を取り出して代入(アラートで使うため) 32 var pair1 = $('#output1 .i').get(0).className.split(" ")[1]; 33 var pair2 = $('#output2 .i').get(0).className.split(" ")[1]; 34 35 //チェックが2個のときのアラート 36 if($('#fluits_list :checked').length == 2){ 37 var result = $('#now_' + pair1).text(); 38 39 //1個目にチェックしたやつが「.damekamo」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート 40 if (($('#output1').find('.i').hasClass('oishi'))){ 41 alert(result); 42 } else 43 //2個目にチェックしたやつが「.oishi」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート 44 if (($('#output1').find('.i').hasClass('mazui'))){ 45 alert(result); 46 } 47 48/******************** 49次のアラートがでない! 50********************/ 51 52 //チェックが2個未満のときのアラート 53 }else{ 54 alert('2個未満ですね'); 55 } 56 57 }); 58 59});
css
1.list { 2 list-style: none; 3} 4.i::before { 5 content: ''; 6 display: block; 7 width: 30px; 8 height: 30px; 9 background-size: contain; 10 vertical-align: middle; 11 z-index: 1; 12 right: 0; 13 background-repeat: no-repeat; 14 background-size: cover; 15 object-fit: cover; 16 margin: 0 auto !important; 17} 18.apple:before { 19 background-image: url(https://cdn.amanaimages.com/cen3tzG4fTr7Gtw1PoeRer/02343000826.jpg); 20} 21.grape:before { 22 background-image: url(http://stat.profile.ameba.jp/profile_images/20150329/22/ae/2E/j/o064006401427634068143.jpg); 23} 24.banana:before { 25 background-image: url(https://cdn.amanaimages.com/preview640/10214001337.jpg); 26} 27.kiwi:before { 28 background-image: url(https://shop.yamatonoen.co.jp/upload/save_image/18H-078-11_01.png); 29} 30 31.pink { 32 background: pink; 33 padding: 20px; 34} 35.aqua { 36 background: aqua; 37 padding: 20px; 38}
回答1件
あなたの回答
tips
プレビュー