asp转发器中的JQuery Slider和Textbox

时间:2016-07-07 15:14:24

标签: javascript c# jquery asp.net

我正在尝试在转发器中创建项目列表。每个项目包含一个带文本框的百分比滑块。我希望链接文本框和相应的滑块,以便用户有两种输入方法。

功能在某种意义上是有效的,但是这些功能目前基于类名而不是ID,这导致单个滑块更新转发器中的所有文本框,反之亦然。

有关如何在转发器中正确链接对的建议吗?

非常感谢: - )

JS

<script>
    $(function () {     
        $(".compDiscSlider").slider({
            value: 0,
            orientation: "horizontal",
            range: "min",
            animate: true,
            step: 0.25,
            min: 0.00,
            max: 100.00,
            slide: function (event, ui) {
                $(".compDiscTB").val(ui.value + "%");
            }
        });
        $(".compDiscTB").change(function () {
            $(".compDiscSlider").slider("value", parseFloat(this.value));
        });
    });
</script>

ASPX

<asp:Repeater ID="rptComponents" runat="server" EnableViewState="false" OnItemDataBound="rptComponents_ItemDataBound">
<ItemTemplate>
    <tr>  
        <td data-title="Discount">  
            <asp:PlaceHolder ID="plhDiscountPricing" runat="server">
                <div id="compDiscSlider" class=compDiscSlider style="width:260px; margin:15px"></div>
                <asp:TextBox ID="compDiscTB" runat="server" CssClass="compDiscTB"></asp:TextBox> 
             </asp:PlaceHolder>
         </td>  
    </tr>
</ItemTemplate>

1 个答案:

答案 0 :(得分:0)

 slide: function (event, ui) {
            this.next('input').val(ui.value + "%");
        }

使用JQuery .next(&#39;输入&#39;)调用来获取下一个输入。这可能不完全正确,但应该让你朝着正确的方向前进。