在单独的函数中使用两个句柄，jquery-ui范围滑块中的值

Question

I am making a page with a simple "dice roll" style game. 我正在用一个简单的“骰子”风格的游戏制作页面。 The game is set up so the user can set a range of numbers using a slider with 2 range handles (made using jquery-ui), and if the random number that is generated when the "roll" button is pressed is within the set range on the slider, the large number displayed turns blue. 设置游戏后，用户可以使用带有2个范围手柄（使用jquery-ui制作）的滑块设置数字范围，并且如果按下“滚动”按钮时生成的随机数在设置范围内在滑块上，显示的大数字变为蓝色。 If the number generated is outside their set range, the number turns red. 如果生成的数字超出其设置范围，该数字将变为红色。

I also added a "bonus" feature that includes a second random number (designated as a "lucky number") that is generated concurrently, and if the random number matches the roll number it counts as a "Jackpot" and the large number turns yellow. 我还添加了“奖励”功能，其中包括同时生成的第二个随机数（称为“幸运数”），如果随机数与掷骰数匹配，则将其计为“头奖”，并且大数变为黄色。 This isn't a huge part of my problem, but it explains why there is a second random number generator amongst my javascript. 这不是我的问题很大的一部分，但是可以解释为什么我的JavaScript中还有第二个随机数生成器。

I have set all returned values to be logged to the console for debugging purposes - when the slider handles are moved, the console logs the high and low values (as well as a win percentage, but that is irrelevant for these purposes). 我已将所有返回值设置为记录到控制台以进行调试-移动滑块手柄时，控制台将记录高值和低值（以及获胜百分比，但这与这些目的无关）。 Also, when the "roll" button is pressed, the random number generated that is designated as the "rolled number" is logged to the console, as is the second random number which is designated as the "lucky number". 另外，当按下“滚动”按钮时，被指定为“滚动号”的所生成的随机数以及被指定为“幸运号”的第二随机数也被记录到控制台。

Most of what I described is already functional on the page with one large exception: I cannot seem to use the values set by the range slider as range values in my roller() function (I had to set them manually - represented in my code as 9 and 95, respectively). 我所描述的大部分内容都已经在页面上起作用，但有一个大例外：我似乎无法将范围滑块设置的值用作我的roller（）函数中的范围值（我必须手动设置它们-在我的代码中表示为9和95）。

I have tried to take the values from the slider function and declare them without a var keyword with the aim of making them globally accessible, but the roller() function still doesn't seem to recognize them. 我试图从slider函数中获取值，并在不使用var关键字的情况下对其进行声明，目的是使它们在全局范围内可访问，但是roller（）函数似乎仍然无法识别它们。 I suspect this may be caused by the slider values not being "set/initialized" when the page first loads, but my knowledge of javascript (particularly jQuery) seems to be inadequate to solve this problem. 我怀疑这可能是由于页面首次加载时未“设置/初始化”滑块值引起的，但是我对javascript（尤其是jQuery）的了解似乎不足以解决此问题。

My issue simply stated: I need to first make sure the two values provided by the range slider are not null when the page loads, and secondly, I need a way to use those values to represent the "win range" in my roller() function. 我的问题简单地说：我需要首先确保在页面加载时范围滑块提供的两个值不为空，其次，我需要一种方法来使用这些值来表示我的roller（）中的“获胜范围”功能。

Any help would be greatly appreciated. 任何帮助将不胜感激。

My code is below 我的代码如下

//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%;
}

I apologize for the abundance of code - I tried making a fiddle, but it didn't display properly. 对于大量的代码，我深表歉意-我尝试摆弄小提琴，但显示不正确。 That's my next problem... 那是我的下一个问题...

Answer 1

JQuery UI Slider has methods that allows you to read the values like this JQuery UI Slider具有允许您读取此类值的方法

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

Here is how you'd use it in your roller function: 这是您在滚子功能中使用它的方式：

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范围滑块中的值

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-29 15:55:27

在单独的函数中使用两个句柄，jquery-ui范围滑块中的值

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-29 15:55:27

解决方案1
1 已采纳 2019-04-29 15:55:27