填充值的jquery ui滑块答案

【问题标题】：jquery ui slider populating the value填充值的jquery ui滑块
【发布时间】：2013-08-13 18:12:34
【问题描述】：

我正在使用 jquery ui 来设置一些滑块。我有很多滑块，但我正在尝试最小化代码。这是我在 html 中设置滑块的方式：

    <div class="budget_icon-wrapper">
        <div data-name="space_def" class="icon">
            <img class="info" src="images/info.png" />
            <img src="images/space-icon.png" />
        </div>
        <div id="space-item" class="space-item slider"></div>
        <div id="space_item-value" class="item-txt">$3.00</div>
    </div>

具有“滑块”类的 div 是滑块。在它旁边的 div 中，每个滑块都有不同的值，这恰好是 3 美元。我想做的是将值从该 div 中提取出来（在本例中为 3），并将其作为滑块的值。

我试过但不太奏效的脚本是这样的：

$(".slider").each(function() {
    value = parseInt($(this).siblings(".item-txt").text(),10);


    $(this).slider({
        animate: "fast",
        max: 25,
        min: 0,
        value: value,
        range: "min"
    });
});

感谢您对此的任何帮助。

【问题讨论】：

你必须摆脱那里的$。

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

改变

value = parseInt($(this).siblings(".item-txt").text(),10);

到

value = parseInt($(this).siblings(".item-txt").text().substring(1),10);

jsFiddle example

parseInt 正在返回 NaN，因为 $ 导致它无法返回您想要的内容。如docs on parseInt note，“如果第一个字符不能转换为数字，则parseInt返回NaN。”

更新：根据要求，如果您想要 3.00 的值，只需使用 value = $(this).siblings(".item-txt").text().substring(1);

【讨论】：

所以我很难完全理解这个功能。所以 parseInt 如果 div 中有一个小数，它将使它成为一个整数。子串有什么作用，把 1 放在 () 里有什么作用？
parseInt 会将浮点数或一些字符串转换为整数。在这种情况下，子字符串将 $3.00 截断为 3.00，因此 parseInt 可以理解它。有关子字符串的规范，请参阅developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。
最后一个问题。有没有办法使用十进制数，所以如果它是 3.30 美元，那么现在它的设置方式只会将 3 存储到 value 变量中，对吗？你如何让它存储 3.3？
您可以使用 substring 删除不需要的字符。通常您需要将字符串转换为浮点数，但 jQuery 可以获取字符串。从技术上讲，在上述情况下甚至不需要 parseInt，但您仍然需要删除 $。
嗯，您能否更新答案以保留小数点？这对我来说仍然是一个新领域，我仍在努力解决它。

【解决方案2】：

$(".slider").each(function() {
    strVal = $(this).next('.item-txt').text().substring(1); // take the substring of the text "$3.00" from the second character to the end (remove the $)
    value = parseInt(strVal,10);
    $(this).slider({
        animate: "fast",
        max: 25,
        min: 0,
        value: value,
        range: "min"
    });
});

【讨论】：