在单独的函数中使用双手柄 jquery-ui 范围滑块的值

Question

我正在制作一个包含简单 "dice roll" 风格游戏的页面。游戏设置为用户可以使用带有 2 个范围手柄的滑块设置数字范围（使用 jquery-ui），如果 [=32] 时生成的随机数=] 按钮被按下是在滑块上的设置范围内，显示的大数字变成蓝色。如果生成的数字超出其设定范围，则数字变为红色。

我还添加了一个 "bonus" 功能，其中包括同时生成的第二个随机数（指定为 "lucky number"），如果该随机数与卷号匹配，则计为 "Jackpot" 并且大数字变成黄色。这不是我的问题的主要部分，但它解释了为什么我的 javascript.

中有第二个随机数生成器

我已将所有返回值设置为记录到控制台以用于调试目的 - 当移动滑块手柄时，控制台会记录高值和低值（以及获胜百分比，但这与这些无关）目的）。此外，当按下 "roll" 按钮时，生成的指定为 "rolled number" 的随机数被记录到控制台，第二个随机数被指定为 "lucky number"。

除了一个很大的例外，我描述的大部分内容已经在页面上起作用：我似乎无法将范围滑块设置的值用作我的 roller() 函数中的范围值（我必须手动设置它们 -在我的代码中分别表示为 9 和 95）。

我试图从滑块函数中获取值并在不使用 var 关键字的情况下声明它们，目的是使它们可以全局访问，但 roller() 函数似乎仍然无法识别它们。我怀疑这可能是由于页面首次加载时滑块值不是 "set/initialized" 引起的，但我对 javascript（特别是 jQuery）的了解似乎不足以解决这个问题。

我的问题简单地说：我需要首先确保范围滑块提供的两个值在页面加载时不为空，其次，我需要一种方法来使用这些值来表示 "win range" 在我的 roller() 函数中。

如有任何帮助，我们将不胜感激。

我的代码如下

//HTML/Javascript
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>ROLLER</title>
</head>
<body>
<div class="wrapper">
    <div class="whitespace"></div>
    <div class="bignumber" id="number">50</div>
    <div class="whitespace"></div>
    <div class="whitespace"></div>
    <div class="rangetext" id="slidervalue">
    <label for="slidenumbers">NUMBER RANGE</label></div>
    <input type="text" id="slidenumbers" name="slidenumbers">
    <div class="rangeslider">
        <div id="slider"></div>
    </div>
    <button class="rollonce" onclick="luckynumber(); roller()">ROLL</button>

<script>
//I NEED THIS FUNCTION TO LOAD ON PAGE LOAD SO THE SLIDER ALREADY HAS REGISTERED VALUES (as of now they are blank on page load with null value - I think)
$('#slider').slider({
    slide: function(event, ui) {
        $('#slidenumbers').val(ui.values[0] + " - " + ui.values[1]);
        var top = ui.values[1];           ///AN ATTEMPT TO SET THE VALUES AS VARIABLES - DID NOT WORK 
        var bottom = ui.values[0];
        // highNumber = top;              ////// AN ATTEMPT TO MAKE THE VALUE VARIABLES GLOBAL - ALSO DID NOT WORK WHEN I ATTEMPTED TO USE THEM IN ROLLER() FUNCTION
        //lowNumber = bottom;
        console.log("BOTTOM VALUE - ", bottom);
        console.log("TOP VALUE - ", top);
        console.log(" --- WIN PERCENT CHANCE --- ", (top - bottom),"%");
    },
    min: 5,
    max: 95,
    values: [15, 85],
    step: 1,
    range: true,
    orientation: "horizontal"
});

var lucky
function roller() {
    random = Math.floor((Math.random() * 99) + 1);
    document.getElementById('number').innerText = random;
    console.log("Your rolled number:", random);
    //THESE ARE THE VALUES (5 and 95) I NEED REPLACED WITH THE (LAST UPDATED) VALUES FROM THE TOP AND BOTTOM RANGE OF THE SLIDER SET BY THE USER
        if (random > 5 || random < 95  && random != lucky) { 
            document.getElementById('number').setAttribute('class', 'bignumber2');
        } if (lucky == random && random > 5 && random < 95) {
            document.getElementById('number').setAttribute('class', 'bignumber');
            console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
        } else if (random <= 5 || random >= 95 && random != lucky) {
            document.getElementById('number').setAttribute('class', 'bignumber1');
        }
};

function luckynumber(){
    random1 = Math.floor((Math.random() * 99) + 1);
    console.log("-------------------------");
    console.log("Lucky number:      ", random1)
    lucky = random1
};
</script>
</div>
</body>
</html>



//CSS
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
}
body, html{
    background: #222;
    font-family: sans-serif;
    height: 100%;
    overflow: hidden;
}
.wrapper{
    background: #000;
    background-size: cover;
    height: 55.9vw;
    text-align: center;
    width: 30%;
    margin-left: 35vw;
}
.bignumber{
    color: #FFFF00;
    font-size: 23vw;
    font-weight: 500;
    font-family: sans-serif;
    margin-left: 1vw;
}
.bignumber1{
    color: #FF0000;
    font-size: 23vw;
    font-weight: 500;
    font-family: sans-serif;
    margin-left: 1vw;
}
.bignumber2{
    color: #0000FF;
    font-size: 23vw;
    font-weight: 500;
    font-family: sans-serif;
    margin-left: 1vw;
}
.rangetext{
    color: #FFFFFF;
    font-size: 2.5vw;
    font-weight: 300;
    margin-top: 1vw;
}
.rangeslider{
    height: 3vw;
    margin-left: 3.5vw;
    margin-top: 1vw;
    position: relative;
    width: 22vw;
}
#slider .ui-slider-range{
    background: #0CF;
    border: 1px solid #AAF;
    outline: none;
 }
 #slider .ui-slider-handle{
    background: #000;
    border: 3px double #FA0;
    outline: none;
}
#slidenumbers{
    background: none;
    border: none;
    color: #AADDFF;
    font-family:  sans-serif;
    font-size: 2vw;
    height: 2.5vw;
    outline: none;
    width: 10vw;
} 
.rollonce{
    background: transparent;
    border: .1vw solid rgba(255,215,0,0.8);
    border-radius: 5px;
    color: #AADDFF;
    cursor: pointer;
    font-family:  sans-serif;
    font-size: 3vw;
    font-weight: 700;
    height: 5vw;
    margin-top: 3vw;
    outline: none;
    padding-top: 0vw;
    text-align: center;
    width: 22vw;
}
.rollonce:hover{
    box-shadow: 0px 0px 20px 10px #FF7500
}
.whitespace{ 
    height: 1.5vw;
    width: 100%;
}

对于代码过多，我深表歉意 - 我尝试制作一个 fiddle，但它没有正确显示。那是我的下一个问题...

Answer 1

JQuery UI Slider 具有允许您像这样读取值的方法

var top = $('#slider').slider( "values", 0 );
var bottom = $('#slider').slider( "values", 1 );

以下是您如何在滚轮功能中使用它：

function roller() {
    random = Math.floor((Math.random() * 99) + 1);
    document.getElementById('number').innerText = random;
    console.log("Your rolled number:", random);

    var top = $('#slider').slider( "values", 0 );
    var bottom = $('#slider').slider( "values", 1 );

        if (random > bottom || random < top  && random != lucky) { 
            document.getElementById('number').setAttribute('class', 'bignumber2');
        } if (lucky == random && random > bottom && random < top) {
            document.getElementById('number').setAttribute('class', 'bignumber');
            console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
        } else if (random <= bottom || random >= top && random != lucky) {
            document.getElementById('number').setAttribute('class', 'bignumber1');
        }
};

Documentation

在单独的函数中使用双手柄 jquery-ui 范围滑块的值

Use values from two-handle, jquery-ui range slider in separate function

html

javascript

css

jquery

jquery-ui