Onclickラジオボタンは、属性に基づいて異なる価格を表示します

Question

2つのラジオボタンがある親クラスがあります。私は親クラスの属性に基づいてdivを表示したいと思っています。私がボックスAを選択すると、それに基づいて値が表示されます。コードは部分的に動作しています。私は何をすべきか混乱しています。どんな助けもありがとう。

<div class="row"> 
    <div class="col-md-6 choose-type" data-type="1" data-doc='0'> 
     <div class="hovereffect"> 
      <div class="overlay"> 
        <div class="info">ORDER NOW</div> 
      </div> 
     </div> 
     <h4 class="overlay_wrap">ABC</h4> 
    </div> 
    <div class="col-md-6 choose-type" data-type="2"> 
     <div class="hovereffect"> 
      <div class="overlay"> 
       <a class="info">ORDER NOW</a> 
      </div> 
     </div> 
     <h4 class="overlay_wrap">XYZ</h4> 
          </div> 
<div class="radio-toolbars time-slot"> 
    <div class="radio_oneimg" data-delivery='two' data-doc='0'> 
     <input type="radio" data-attr="1" id="radio2" name="answer[43]" value='' checked="checked" required/> 
     <label for="radio2"><p>QWRTY<span class="doc_print"></span> vbnx<span></label> 
    </div> 
    <div class="radio_oneimg" data-delivery='three' data-doc='1'> 
     <input type="radio" data-attr="2" id="radio3" name="answer[43]" value='' required/> 
     <label for="radio3"><p>apply</p><span><span class="doc_print"></span> vbnx<span></label> 
    </div> 
</div> 
<div class="doc_price"><span><i></i></span></div> 

JS：

$('.radio_oneimg').bind('click', function(e){ 
    if ($(this).attr('data-doc') == '0') { 
     $('#radio2').on('click', function(){ 
      $('.doc_price span i').html(999); 
     }) 
     $('#radio3').on('click', function(){ 
      $('.doc_price span i').html(2999); 
     }) 
    } 
    if ($(this).attr('data-doc') == '1') { 
     $('#radio2').on('click', function(){ 
      $('.doc_price span i').html(799); 
     }) 
     $('#radio3').on('click', function(){ 
      $('.doc_price span i').html(2499); 
     }) 
    } 
}) 

データ-docのが0の場合、データ-docのは、私は799 0Rを印刷したい1であれば、私は価格999または2999を印刷したい下記のHTMLコードがありますラジオボタンのクリックに基づいて2499。上記のフィールドから1つの価格と2エンドスクリプトから2エンドの価格だけを表示しているため。私がどこに間違っているのか誰にでも伝えることができます

Answer 1

これは必要なものですか？

$('.radio_oneimg').bind('click', function(e){ 
if ($(this).attr('data-doc') == '0') { 
    $('#radio2').on('click', function(){ 
     $('.doc_price span i').html("999"); 
    }) 
    $('#radio3').on('click', function(){ 
     $('.doc_price span i').html("2999"); 
    }) 
} 
if ($(this).attr('data-doc') == '1') { 
    $('#radio2').on('click', function(){ 
     $('.doc_price').html("799"); 
    }) 
    $('#radio3').on('click', function(){ 
     $('.doc_price').html("2499"); 
    }) 
} 
}) 

Answer 2

1. 何span iあなただけ、あなたは組み合わせることができますchange代わりのclick
2. を使用する必要があります
3. 直接radio要素にバインドし、周りclickを削除する必要が
.doc_price内部はありませんイベントリスナーは4つではなく2つだけを使用します
5. dataの代わりに、attrあなたのコードは次のようにする必要がありますdata-doc

$('#radio2').on('change', function() { 
 
    if ($(this).parent().data('doc') == '0') { 
 
     $('.doc_price').html(999); 
 
    } 
 
    else if ($(this).parent().data('doc') == '1') { 
 
     $('.doc_price').html(799); 
 
    } 
 
}); 
 
    
 
$('#radio3').on('change', function() { 
 
    if ($(this).parent().data('doc') == '0') { 
 
     $('.doc_price').html(2999); 
 
    } 
 
    else if ($(this).parent().data('doc') == '1') { 
 
     $('.doc_price').html(2499); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="radio-toolbars time-slot"> 
 
    <div class="radio_oneimg" data-delivery='two' data-doc='0'> 
 
     <input type="radio" data-attr="1" id="radio2" name="answer[43]" value='' checked="checked" required/> 
 
     <label for="radio2"><p>QWRTY<span class="doc_print"></span> vbnx<span></label> 
 
    </div> 
 
    <div class="radio_oneimg" data-delivery='three' data-doc='1'> 
 
     <input type="radio" data-attr="2" id="radio3" name="answer[43]" value='' required/> 
 
     <label for="radio3"><p>apply</p><span><span class="doc_print"></span> vbnx<span></label> 
 
    </div> 
 
</div> 
 
<div class="doc_price"></div>

Answer 3

の値を取得します。現在のコードでは、divをクリックするとラジオボタンのクリックイベントがバインドされるため、divを最初にクリックした後にクリックイベントが発生するようになります。私はあなたが必要とするものを、私の理解に従って正規化するコードを書いています。

$(document).on('click', '#radio2',function(){ 
 
    var val = $(this).parent().data('doc') == '0' ? 999: 2999; 
 
    $('.doc_price span i').html(val); 
 
     
 
}); 
 
$(document).on('click', '#radio3', function(){ 
 
    var val = $(this).parent().data('doc') == '0' ? 799: 2499; 
 
    $('.doc_price span i').html(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="radio-toolbars time-slot"> 
 
    <div class="radio_oneimg" data-delivery='two' data-doc='0'> 
 
     <input type="radio" data-attr="1" id="radio2" name="answer[43]" value='' checked="checked" required/> 
 
     <label for="radio2"><p>QWRTY<span class="doc_print"></span> vbnx<span></label> 
 
    </div> 
 
    <div class="radio_oneimg" data-delivery='three' data-doc='1'> 
 
     <input type="radio" data-attr="2" id="radio3" name="answer[43]" value='' required/> 
 
     <label for="radio3"><p>apply</p><span><span class="doc_print"></span> vbnx<span></label> 
 
    </div> 
 
</div> 
 
<div class="doc_price"><span><i>0</i></span></div>

Answer 4

ただ、この行を更新します。

<div class="doc_price"><span><i></i></span></div> 

価格が表示されます。

Answer 5

これを試してみてください：

$("input[type=radio]").on('click', function() { 
     var radioId = $(this).attr("id"); 
     var dataDoc = $(this.parentElement).attr("data-doc"); 
     $('.doc_price').html(''); 
     if (dataDoc == "0") { 
      if (radioId == 'radio2') { 
       $('.doc_price span i').html(999); 
      } 
      if (radioId == 'radio3') { 
       $('.doc_price span i').html(2999); 
      } 
     } 
     else { 
      if (radioId == 'radio2') { 
       $('.doc_price span i').html(799); 
      } 
      if (radioId == 'radio3') { 
       $('.doc_price span i').html(2499); 
      } 
     } 
    });