Question

我目前在foreach循环的每次迭代中输出两个表（c＃razor视图，尽管这里并不太相关）。我将这两个表包装在一个div为class = jq-roundContainer的div中，并且两个表中的每个输入都有一个类jq-hitOrMiss。我试图总结输入到文本输入中的X的数量，如下所示，但变量sum为0（当我知道它不应该是）时，inputs.length也是0。下面的html和简单的jquery函数

HTML：

<div class="jq-roundContainer">
    <table class="table table-bordered">
        <thead>
            <tr class="active">
                <th colspan="2" class="text-center">1</th>
                <th colspan="2" class="text-center">2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="display:none">
                    @Html.Hidden("EventId", Request.Params["eventId"]);
                    @Html.Hidden("UserId", Request.Params["userId"]);
                    <input type="hidden" name="scoreCards[@i].UserProfile" value="@round.UserProfile" />
                </td>
                <td>
                    <input class="jq-hitOrMiss" onchange="SumHits();" name="scoreCards[@i].Hit1StationOneShotOne" pattern="[xXoO]" type="text" maxlength="1" size="1" value="@ScoreHitMisConverter.IsHitToTableRowValue(round.Hit1StationOneShotOne)" />
                </td>                                

                @{i++;}
            </tr>
        </tbody>
    </table>

    <table class="table table-bordered">
        <thead>
            <tr class="active">
                <th colspan="2" class="text-center">14</th>
                <th class="text-center">TOTAL</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input class="jq-hitOrMiss" onchange="SumHits();" name="scoreCards[@i].Hit27StationThreeShotSeven" pattern="[xXoO]" type="text" maxlength="1" size="1" value="@ScoreHitMisConverter.IsHitToTableRowValue(round.Hit27StationThreeShotSeven)" />
                </td>
                <td class="text-center total jq-total">@round.Score</td>
                @{i++;}
            </tr>
        </tbody>
    </table>
</div>

和jquery函数：

 function SumHits() {

        var sum = 0;
        var inputs = $(this).closest('.jq-roundContainer').find('.jq-hitOrMiss');
        $.each(inputs, function (index, value) {
            var value = $(value).val();
            if (value == 'X' || value == 'x') {
                sum++;
            }
        });
        var totalInput = $(this).closest('.jq-roundContainer').find('.jq-total');
        totalInput.text(sum);
    }

Answer 1

在正常功能内，这将指向window。因此，当您使用内联处理程序时，必须显式传递this，在函数内接收并使用它。

function SumHits(_this) {
  var inputs = $(_this).closest('.jq-roun.....

在html中，

<input class="jq-hitOrMiss" onchange="SumHits(this);".....

Answer 2

问题出现在this元素上，它引用window而不是触发事件的元素。因此，你得到的结果

正如您正在使用jQuery绑定事件一样使用它并摆脱ulgy内联点击处理程序。

$('.jq-hitOrMiss').on('change', SumHits)

Answer 3

这对我有用，删除你的html上的on更改很难维护

$('div.jq-roundContainer input.jq-hitOrMiss').change(function () {
    var $parent = $(this).parents('.jq-roundContainer');
    var sum = 0;
    var inputs = $parent.find('.jq-hitOrMiss');
    inputs.each(function () {
        var value = $(this).val();
        if (value == 'X' || value == 'x') {
            sum++;
        }
    });
    var totalInput = $parent.find('.jq-total');
    totalInput.text(sum);
});

或者如果你想保留你的功能

$('div.jq-roundContainer input.jq-hitOrMiss').change(SumHits);

function SumHits(){
    var $parent = $(this).parents('.jq-roundContainer');
    var sum = 0;
    var inputs = $parent.find('.jq-hitOrMiss');
    inputs.each(function () {
        var value = $(this).val();
        if (value == 'X' || value == 'x') {
            sum++;
        }
    });
    var totalInput = $parent.find('.jq-total');
    totalInput.text(sum);
}

使用最接近查找文本输入的JQuery问题

3 个答案: