Javascript单词计数价格计算器

时间:2016-02-22 19:54:15

标签: javascript jquery

除了定价计划选择的问题外,一切正常。我想要的是,每当用户点击指定的价格时(即使文本已经存在于textarea中),它应该立即更新最终价格。但它不会在第一次点击时改变。

我应该点击两次。任何人都知道出了什么问题?

所以这就是它的样子:

enter image description here

这里有javascript代码:

function __textCalculatorCounter(){

    var value = $('#calculateText').val();
    var spanWords = $('#calculatedWordsTotal'),
        spanChars = $('#calculatedCharsTotal'),
        spanPrice = $('#calculatedPriceTotal');


    if (value.length == 0) {
        spanWords.html(0);
        spanChars.html(0);
        return;
    }

    var selectedPricing = $("input[name=calculatePrice]:checked").val();
    var wordCount = value.trim().replace(/\s+/gi, ' ').split(' ').length;
    var totalChars = value.length;
    var totalPrice = (wordCount * parseFloat(Math.round(selectedPricing * 100) / 100));

    spanWords.html(wordCount);
    spanChars.html(totalChars);
    spanPrice.html(totalPrice.toFixed(2));
}

function _initTextCalculator(){
    var textblock = $('#calculateText');
    textblock.change(__textCalculatorCounter);
    textblock.keydown(__textCalculatorCounter);
    textblock.keypress(__textCalculatorCounter);
    textblock.keyup(__textCalculatorCounter);
    textblock.blur(__textCalculatorCounter);
    textblock.focus(__textCalculatorCounter);
    $('label', '#pricesGroup').click(__textCalculatorCounter);
}

====更新====

我不知道为什么,但它在jsfiddle中工作正常......它与从html和javascript中提取的代码完全相同。

JSFIDDLE

1 个答案:

答案 0 :(得分:0)

所以,既然没有人得到答案,我发布了我的,解决了这个问题。

问题在于Twitter的Bootstrap 3单选按钮样式,这在与javascript一起使用时实际上是常见问题。

我已经更改了单选按钮的点击处理程序:

function _initTextCalculator(){
    var textblock = $('#calculateText');
    textblock.change(_textCalculatorTrigger);
    textblock.keydown(_textCalculatorTrigger);
    textblock.keypress(_textCalculatorTrigger);
    textblock.keyup(_textCalculatorTrigger);
    textblock.blur(_textCalculatorTrigger);
    textblock.focus(_textCalculatorTrigger);

    // Fixing bootstrap 3 radio buttons
    $("#pricesGroup label").on('click', function(){
        // Once clicked, mark current radio as checked
        $('input:radio', this).prop("checked", true);
        // Then call a function to calculate the price
        _textCalculatorTrigger();
    });
}

正如它已经评论过的那样,它会分配一个属性"已检查"一旦点击它的父label标签,就先点击单选按钮,然后它调用一个函数来计算价格。

感谢所有人