Javascript 设置jQuery滑块值并使用AJAX发送它们

我正在使用slider插件并尝试实现以下目标：

1。我想根据用户单击的

li数据值

元素设置不同的滑块

max值

例如，如果单击
属性，滑块的
最大值应为39。39应该作为变量
stufe
发送到服务器端脚本

2.默认加载的滑块值应始终是当前单击的
li数据值
元素的
max值

例如，如果单击
属性，则默认加载的滑块值应为34。34应该作为变量
stufe
发送到服务器端脚本

为了更好地理解，我做了一次尝试，但我有以下问题：


无论选择哪个值，滑块都会自动跳回滑块的最大值
它将错误的值发送到服务器端脚本（检查开发人员工具的网络选项卡）

这是我的尝试：

    $("#slider-vertical").slider({
    orientation: "horizontal",
    range: "min",
    min: 1,
    slide: function (event, ui) {
        $("#amount").val(ui.value);
    },
    stop: getResponse
});

$("#amount").val($("#slider-vertical").slider("value"));
getResponse(0);

let $li = $('ul#menu li').on('click', function () {
    // set a class on the clicked element to be able to read its properties later
    $li.removeClass('active');
    $(this).addClass('active');
    getResponse();
});

function getResponse() {
    let bonus = parseInt($('ul#menu li.active').attr('data-value'));
    let stufe = $("#slider-vertical").slider("value");

console.log(bonus);

  if(isNaN(bonus)) {
      $("#slider-vertical").slider("option", "max", 29);
      $("#slider-vertical").slider("value", 29);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
            }
  else if (bonus === 0) {
      $("#slider-vertical").slider("option", "max", 34);
      $("#slider-vertical").slider("value", 34);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
            }
  else if (bonus === 582) {
      $("#slider-vertical").slider("option", "max", 39);
      $("#slider-vertical").slider("value", 39);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
            }

    ajaxManager.add({
        type: "GET",
        cache: "true",
        url: "itemscript.php",
        data: {
            "bonus": bonus,
            "stufe": stufe
        },
        success: function (data) {

        }
    });
}
});

您的代码中存在一个问题：


在getResponse（）中的if链中，您将
bonus
strikt与
==
的数字（0或582）进行比较，因为数据attr中的值是一个字符串，所以您必须在比较之前将其解析为一个数字

因此，它应该是：

let bonus = parseInt($('ul#menu li.active').attr('data-value'));

请在我的中尝试，因为我没有让它在堆栈片段中工作。
您的代码中有一个问题：


在getResponse（）中的if链中，您将
bonus
strikt与
==
的数字（0或582）进行比较，因为数据attr中的值是一个字符串，所以您必须在比较之前将其解析为一个数字

因此，它应该是：

let bonus = parseInt($('ul#menu li.active').attr('data-value'));

在我的中尝试它，因为我没有让它在堆栈片段中工作。
您首先读取滑块值，然后有条件地更新它的值，因此它正在拾取以前选择的值。你必须用另一种方式来做

您可以运行下面的代码段并查看网络


jQuery（函数（$）{
var ajaxManager=$.manageAjax.create（'cacheQueue'{
队列：“清除”，
回答：是的，
对:对,，
我说：是的
});
//滑块脚本
$（“#滑块垂直”）。滑块({
方向：“水平”，
射程：“分钟”，
民:1,，
幻灯片：功能（事件、用户界面）{
美元（“#金额”）.val（ui.value）；
},
停止：getResponse
});
getResponse（0）；
让$li=$（'ul#menu li'）。在（'click'，function（）上{
//在单击的元素上设置一个类，以便以后能够读取其属性
$li.removeClass（'active'）；
$（this.addClass（'active'）；
getResponse（parseInt（$（'ul#menu li.active'）.attr（'data-value'））；
});
功能getResponse（奖金）{
控制台日志（奖金）；
让斯图夫；
if（伊斯南（奖金））{
stufe=29；
}否则如果（奖金===0）{
stufe=34；
}否则如果（奖金===582）{
stufe=39；
}
$（“垂直滑块”）。滑块（“选项”，“最大值”，stufe）；
$（“垂直滑块”）。滑块（“值”，stufe）；
$（“#数量2”）.val（stufe）；
美元（“#金额”）.val（stufe）；
ajaxManager.add({
键入：“获取”，
缓存：“真”，
url:“https://elder-scrolls-online.eu/datenbank/itemscript.php",
数据：{
“奖金”：奖金，
“斯图夫”：斯图夫
},
成功：功能（数据）{
}
});
}
});
.ui-widget.ui-widget-content{
边框：1px实心#C5C5；
宽度：100%；
}
.ui状态默认值，
.ui小部件内容.ui状态默认值，
.ui小部件头{
边框：1px实心#444！重要；
背景：无！重要；
}
.ui滑块.ui滑块句柄{
位置：绝对位置；
z指数：2；
宽度：1.2米；
高度：1.2米；
游标：默认值；
-ms触摸动作：无；
触摸动作：无；
}
.ui-widget.ui-widget-content{
边框：1px实心#C5C5；
背景色：#353232；
}
.ui滑块水平。ui滑块最小范围{
左：0；
背景色：#817373！重要；
}


斯图夫：
/


版本0
版本1
您首先读取滑块值，然后有条件地更新其值，因此它会选择以前选择的值。你必须用另一种方式来做

您可以运行下面的代码段并查看网络


jQuery（函数（$）{
var ajaxManager=$.manageAjax.create（'cacheQueue'{
队列：“清除”，
回答：是的，
对:对,，
我说：是的
});
//滑块脚本
$（“#滑块垂直”）。滑块({
方向：“水平”，
射程：“分钟”，
民:1,，
幻灯片：功能（事件、用户界面）{
美元（“#金额”）.val（ui.value）；
},
停止：getResponse
});
getResponse（0）；
让$li=$（'ul#menu li'）。在（'click'，function（）上{
//在单击的元素上设置一个类，以便以后能够读取其属性
$li.removeClass（'active'）；
$（this.addClass（'active'）；
getResponse（parseInt（$（'ul#menu li.active'）.attr（'data-value'））；
});
功能getResponse（奖金）{
控制台日志（奖金）；
让斯图夫；
if（伊斯南（奖金））{
stufe=29；
}否则如果（奖金===0）{
stufe=34；
}否则如果（奖金===582）{
stufe=39；
}
$（“垂直滑块”）。滑块（“选项”，“最大值”，stufe）；
$（“垂直滑块”）。滑块（“值”，stufe）；
$（“#数量2”）.val（stufe）；
美元（“#金额”）.val（stufe）；
ajaxManager.add({
键入：“获取”，
缓存：“真”，
url:“https://elder-scrolls-online.eu/datenbank/itemscript.php",
数据：{
“奖金”：奖金，