javascript - 回发导致 slider 重置，如何阻止它进行重置(asp.net 网站)

Question

我有一个 slider ，在页面加载时我将默认值设置为 slider (25,75)。每当我更改 slider 值后，更新面板内都会有一个回发，它将值重置为 25,75 我如何才能阻止它进行重置。

 <asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />

当我从下拉列表中选择一个选项时， slider 中的值会重置。如何阻止它

 <script type="text/javascript">
        function pageLoad(sender, args) {
            $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 100,
                    values: [25, 75],
                    slide: function (event, ui) {
                        $("#minval").val("" + ui.values[0] + " - " + ui.values[1]);
                    }
                });
                $("#minval").val("" + $("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));
            });
        }
    </script>

Answer 1

如果你想在回发之间保持 slider 的状态，你需要将 slider 的值获取到一些实际返回到服务器的输入中，或者将 slider 移到更新面板之外并移动初始化pageLoad() 中的代码。对于第一种方法:

标记:

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:HiddenField ID="hfSliderHandle1" Value="25" runat="server" />
        <asp:HiddenField ID="hfSliderHandle2" Value="75" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

脚本:

var $h1 = $('input[id$="hfSliderHandle1"]'),
    $h2 = $('input[id$="hfSliderHandle2"]');

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [parseInt($h1.val()), parseInt($h2.val())],
    slide: function (event, ui) {
        $("#minval").val(ui.values[0] + " - " + ui.values[1]);
        $h1.val(ui.values[0]);
        $h2.val(ui.values[1]);
    }
});

你可以解析 #minval 中的任何内容来做同样的事情，但我对那个元素的性质一无所知，所以我只是按原样提供解决方案给你根据需要调整概念。例如，如果它是您的更新面板中的一个文本框，您预先填充了值“25 - 75”:

var $minVal = $("#minval");
var h1 = parseInt(/^\d+/.exec($minVal.val())[0]),
    h2 = parseInt(/\d+$/.exec($minVal.val())[0]);

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [h1, h2],
    slide: function (event, ui) {
        $minVal.val(ui.values[0] + " - " + ui.values[1]);
    }
});