Question

有一个父类，我有两个单选按钮。我想根据父类的属性显示div。如果我选择框A，它应该显示基于它的值。代码部分工作，我有点困惑，如何做。任何帮助，将不胜感激。以下是html代码：

<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);
        })
    }
})

如果data-doc为0，我想打印价格999或2999.如果data-doc为1，我想根据单选按钮打印799 0r 2499。因为它只显示上述字段中的一个价格和来自2end脚本的2end价格。任何人都可以告诉我哪里出错了。

Answer 1

您的代码应该是这样的。在您当前的代码中，单击div时单击单选按钮上的单击事件，因此在首次单击div后，它似乎不正确。我按照我的理解，按照规范化的方式编写了代码。

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

Answer 2

这是你需要的吗？

$('.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 3

span i

.doc_price

您必须删除周围的click，直接将其绑定到radio元素
您应该使用change代替click
您可以组合事件侦听器并仅使用两个而不是四个
您应该使用data代替attr来获取data-doc

＆＃13;

$('#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);
    }
});

＆＃13;

<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>

＆＃13;

Answer 4

只需更新此行。

from flask_testing import TestCase
from app import app

class TestQueryString(TestCase):

    def create_app(self): # Must be implemented
        return app

    def test_json_parse_args(self):
        data = {
            'parameter': 'value'
        }

        r = self.client.get('/resources', query_string=data)
        self.assert200(r)
        self.assertEqual(r.data, 'value')

它将开始显示价格。

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);
            }
        }
    });

Onclick单选按钮根据属性显示不同的定价

5 个答案: