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

JQuery issue using closest to find text inputs

本文关键字：JQuery 问题输入文本最接近查找更新时间：2024-02-29

我目前在foreach循环的每次迭代中输出两个表（c#razor视图，尽管这在这里并不太相关）。我将这两个表包装在一个class＝jq-roundContainer的div中，两个表中的每个输入都有class jq-hitOrMiss。我试图将输入到文本输入中的X的数量总结如下，但变量sum为0（当我知道它不应该为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);
    }

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

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

在html中，

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

问题出现在引用window的this元素上，而不是触发事件的元素。这样你就得到了的结果

当您使用jQuery绑定事件时，请使用它，并去掉ulgy内联点击处理程序。

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

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

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