Question

我的textbox onchange事件的jquery函数。当触发器时，我想验证用户在文本框中输入的值，其中包含转发器显示的数据表中的值。我能够获得文本框的值，但我的问题是我无法从转发器获取值（数量列）。我为行的id添加了一个itemindex，以识别正确的行并获取列数量的值。在调试模式下，我使用的变量是未识别的，所以我根本没有得到任何值。我需要帮助，我现在已经为此挣扎太久了。

HTML

<asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div id="ucprodres-in-stock<%# Container.ItemIndex%>>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="ucprodres-stock availability">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Availability").ToString%>
                    </div>
                    <div class="ucprodres-stock unit-price">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRange").ToString%>
                    </div>
                    <div class="ucprodres-stock dollar">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRangePrice").ToString%>
                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">
                        <asp:TextBox ID="tbxInStock" runat="server"></asp:TextBox>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

jquery :( + itemIndex也不起作用，我如何为id添加索引，因为我使用container.itemIndex使我的id唯一？）

function ValidateQty1(txtBox) {
    var qtyreqd = txtBox.value;
    var instockrow = document.getElementById("ucprodres-in-stock" + itemIndex);
    var qtyavail = instockrow.childNodes[1].nodeValue;
    if (qtyreqd > qtyavail) {
        alert("The required quantity should not be greater than the available quantity");
}

示例生成的html

<div id="ucprodres-in-stock">

                <div id="ucprodres-in-stock0>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        FAIRCHILD SEMICONDUCTOR C
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        2
                    </div>
                    <div class="ucprodres-stock availability">
                        In Stock
                    </div>
                    <div class="ucprodres-stock unit-price">

                    </div>
                    <div class="ucprodres-stock dollar">

                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">

                        <input name="MasterBasic$MasterPageContent$ucProductHeader$ucProductResults$rptInStock$ctl00$tbxInStock" type="text" id="MasterPageContent_ucProductHeader_ucProductResults_rptInStock_tbxInStock_0" onchange="ValidateQty1(this);" onkeypress="return validate(event);" />
                    </div>
                </div>

                <div id="ucprodres-in-stock1>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        Fairchild Semiconductor Corp
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        6
                    </div>
                    <div class="ucprodres-stock availability">
                        In Stock
                    </div>
                    <div class="ucprodres-stock unit-price">

                    </div>
                    <div class="ucprodres-stock dollar">

                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">

                        <input name="MasterBasic$MasterPageContent$ucProductHeader$ucProductResults$rptInStock$ctl01$tbxInStock" type="text" id="MasterPageContent_ucProductHeader_ucProductResults_rptInStock_tbxInStock_1" onchange="ValidateQty1(this);" onkeypress="return validate(event);" />
                    </div>
                </div>

这里是一个示例输出，以便更好地理解我的场景：当触发onchange时，我想获得txtbox更改的qty-avail中的值。

enter image description here

更新 Jquery函数：

function ValidateQty1(txtBox) {
    var qtyreqd = txtBox.value;
    var qtyavail = $(this).parent().siblings(".qty-avail").text().trim();
    alert(qtyavail);
}

HTML：

<asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div id="ucprodres-in-stock<%# Container.ItemIndex%>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="ucprodres-stock availability">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Availability").ToString%>
                    </div>
                    <div class="ucprodres-stock unit-price">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRange").ToString%>
                    </div>
                    <div class="ucprodres-stock dollar">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRangePrice").ToString%>
                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">
                        <input type="text" onkeypress="return validate(event);" onchange="ValidateQty1(this);"  />
                        <%--<asp:TextBox ID="tbxInStock" runat="server"></asp:TextBox>--%>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

Answer 1

您尝试选择的div的ID有一个流氓＆gt;他们的性格。

id="ucprodres-in-stock0>"

此处您还有纯JavaScript。没有jQuery用法。

Answer 2

您可以使用nth-of-type与JQuery按索引查找项目，类似于：

<script>
var foundEl = $( "#ucprodres-in-stock > div:nth-of-type(2)" );
</script>

以下是文档的链接：

http://api.jquery.com/nth-of-type-selector/

例如：

<form>
<fieldset>
     <section id="demo">
            <!-- some code-->
     </section>
     <section id="test">
            <!-- some code-->
     </section>
     <section id="hello">
            <!-- some code-->
     </section>
  </fieldset>
 </form>

这将打印＆＃34; test＆＃34;在控制台中：

var el =$("form>fieldset>section:nth-child(2)");
console.log(el.attr("id"));

更新1：

根据您的重新发布更新，我将如何执行此操作，我将使用类.qty-avail搜索父级兄弟姐妹，例如：

$("input").on('change',function(){
    var t = $(this).parent().siblings(".qty-avail").text().trim();
    alert(t);
});

http://jsfiddle.net/X5Q4H/1 要么就像在您的代码示例中一样：

http://jsfiddle.net/X5Q4H/2/

如何使用jquery从Repeater获取/访问行值？

2 个答案: