Javascript/JQuery文本框值计算 [英] Javascript/JQuery Textbox Values Calculations

问题描述

我试图从这些文本框中进行简单的计算.
这是我到目前为止的代码:

I was trying to make a simple computation out of these textboxes.
This is my code so far:

   @foreach (var discount in Model.Discounts)
            {
                <div class="editor-label">
                    <label for="@discount.Key.DiscountCode">@discount.Key.DiscountName</label>
                </div>
                <div class="editor-field">
                    <input class="discountCode" name="discountCode" readonly="true" type="text" />
                    <a class="remove" data-key="discountCode" href="javascript:void(0);">Remove</a>
                    <a class="edit" data-key="discountCode" href="javascript:void(0);">Edit</a>
                </div> <br />
            }

<div class="totaldiscounts">
Total: <input id="total" type="text" />
</div>

    <script>
    $('.edit').on('click', function () {
        var parent = $(this).parent();
        var input = parent.find('input');

        if (input.attr('readonly') === 'readonly') {
            $(this).text('Stop Edit');
        }
        else {
            $(this).text('Edit');
        }
        input.attr('readonly', !input.attr('readonly'));


    });

    $('.remove').on('click', function () {
        var parent = $(this).parent();
        var input = parent.find('input');
        input[0].value = 0;
        $(input).first().blur();

        var parent = $(this).closest("div");
        var uncle = parent.prev();
        parent.remove();
        uncle.remove();
    });


    $('.discountCode').on('blur', function () {

        var inputs = $(".discountCode");

        var val = 0;
        for (var i = 0; i < inputs.length; i++) {
            if (!isNaN(inputs[i].value)) {
                val += +inputs[i].value; 
            }
        }

        $('#total').val(val);
    });
    </script>

此代码有效，直到我必须将每个文本框的类名称更改为它们的实际唯一折扣代码，如下所示:

This code works until I have to change the class name of each textboxes into their actual unique discount codes like this:

<input class="@Model.discount.discountCode" name="@Model.discount.discountCode" readonly="true" type="text" />

显然，我的JavaScript不再起作用，因为每个文本框的类名现在彼此不同.
如何使我的JavaScript与此设置配合使用.
任何帮助将不胜感激.谢谢！！

So apparently, my javascript no longer works because the classname of each textboxes are now different to each other.
How can I make my javascript work with this setup.
Any help will be greatly appreciated. Thank you!!

推荐答案

将附加的类名放入element(example).

Put the additional class name into element(example).

class="unique_class_name shared_class_name"

毕竟，循环到每个类(shared_class_name)，以获得类似于以下代码的值:

After all, loop to each class(shared_class_name), to get the value like following code :

$('.shared_class_name').on('blur', function ()....

这篇关于Javascript/JQuery文本框值计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！