Question

我试图实现一个自编写的查询功能。有关该功能的简要说明：更改单选按钮时应重新计算两个值。它在JSFiddle中工作。（http://jsfiddle.net/VL465/34/）

但是现在我正在尝试在真实的网页中实现它。但实际上我无法让它发挥作用。我试图调试它，但没有研磨到保持。

目前，控制台仅显示“已加载功能”消息。更改单选按钮时，它不会显示识别日期。

让我澄清一下当前的HTML文件：

我的头脑中有：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="/js/functions.js"></script>

表格完全相同：

<form action="/b/" method="POST" id="choseLessor">
    <fieldset>
    <input type="hidden" name="userLocale" value="en">
    <ul>
        <li><span class="rate"> € 21,29</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="30" data-price="21.29"><b>30 days </b></li>
        <li><span class="rate"> € 23,65</span> <span class="note">starting at </span><span class="radio" style="background-position: 0px -50px;"></span><input type="radio" class="styled" name="days" value="60" data-price="23.65" checked=""><b>60 days </b></li>
        <li><span class="rate"> € 26,02</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="90" data-price="26.02"><b>90 days </b></li>
        <li><span class="rate"> € 27,20</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="120" data-price="27.2"><b>120 days </b></li>
    </ul>
    <div class="priceCalculation">
        <div class="list">
            <span class="type">List Price:</span>
            <span class="retailPriceActual">
                <div class="strikethrough">€ 49,93</div>
            </span>
        </div>
        <div class="savings">
            <span class="type">Your Savings:</span>
            <span class="bookSavings" id="CalculateSavings">€ 26,28</span>
        </div>

        <div class="total">
            <span class="type bigger">Your Price:</span>
            <span class="totalPrice" id="CalculatePrice">€ 23,65</span>
        </div>

    </div>
    <input type="submit" value="Cho" class="btn">
    </fieldset>
</form>

和functions.js的内容

$( document ).ready(function() {
    console.log ( 'Function loaded' );
    $("input[name=days]:radio").change(function () {  
        console.log ( 'Days recognized' );
        // get values
        var savingPrice = 0;
        var msrp = $('input[name="msrp"]').val();
        var periodPrice = $('input[name="days"]:checked').data('price');
        var userLocale = $('input[name="userLocale"]').val();

        console.log ( 'UserLocale' + userLocale);

        // calculate bac
            savingPrice = (msrp-periodPrice).toFixed(2); 

        if(userLocale === 'nl')
        {   
            savingPrice = savingPrice.replace(/\./g, ',');
            periodPrice = periodPrice.replace(/\./g, ',');
        }

        $('#CalculateSavings').text('&euro; ' + savingPrice);
        $('#CalculatePrice').text('&euro; ' + periodPrice);
    });
});

控制台显示：

Function loaded

并且不超过这个，即使没有更改单选按钮也是如此。

我做错了什么？

Answer 1

我认为问题不在于您的代码本身，而在于它与custom-form-elements.js中包含的代码的交互方式

似乎您的单选按钮隐藏在样式化的span元素后面，以改善表单的外观和感觉。但是，从DOM的角度来看，用户单击的实际元素不是单选按钮，而是span元素。

custom-form-elements脚本在幕后做了一些时髦的东西，使它看起来像选择了单选按钮，但是单选按钮上永远不会触发change事件。

为了解决这个问题，您需要在$(document).ready()中添加以下内容：

$("span.radio").click(function () { 
    $(this.nextSibling).trigger('change'); 
});

这将向span掩码添加一个click事件处理程序，它将在相应的单选按钮上触发change事件。查看HTML，this.nextSibling始终引用范围旁边的单选按钮。

jquery函数输入无线电onchange

1 个答案: