チェックをの有無によって、「実行」ボタンを押したときのアクションを変更したいです。
そのためにjavascriptでクラスが変更されるように、と考えているのですけれど、次のHTMLとjavascriptでは、クラスがうまく変更されず困っております。
html
1<div class="osu">実行</div> 2 <div class="changeterm pika1"> 3 <num>1回目</num> 4 </div> 5 <div class="changeterm pika2"> 6 <num>2回目</num> 7</div> 8 9<div class="docchi" data-required="no" data-type="radio"> 10 <label class="checkbox-block"> 11 <input class="checkbox_on" name="checkbox_on[]" value="on" type="checkbox"> 12 </label> 13</div>
javascript
1$('.osu').on("click",function(){ 2 $('.changeterm').hide(); 3 $('.pika1').fadeIn(100).delay(100).fadeOut(100); 4 $('.pika2').delay(300).fadeIn(100); 5 $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000); 6 $('.huwa2').delay(3000).fadeIn(1000); 7}); 8$('input[value="on"]').on('change', function() { 9var removeClass = $(this).val() == "pika1" ? 'huwa1 huwa2' : 'pika1 pika2'; 10var addClass = $(this).val() == "pika1" ? 'pika2' : 'huwa2'; 11var prop = $('.checkbox_on').prop('checked'); 12if (prop) { 13 $('.changeterm').eq(0).removeClass(removeClass).addClass($(this).val()); 14 $('.changeterm').eq(1).removeClass(removeClass).addClass(addClass); 15} 16});
実際の状況です☟
https://jsfiddle.net/pgmusbcf/
修正点をご指導頂ければ幸いです。宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー