在單獨的函數中使用兩個句柄，jquery-ui范圍滑塊中的值

Question

我正在用一個簡單的“骰子”風格的游戲制作頁面。 設置游戲后，用戶可以使用帶有2個范圍手柄（使用jquery-ui制作）的滑塊設置數字范圍，並且如果按下“滾動”按鈕時生成的隨機數在設置范圍內在滑塊上，顯示的大數字變為藍色。 如果生成的數字超出其設置范圍，該數字將變為紅色。

我還添加了“獎勵”功能，其中包括同時生成的第二個隨機數（稱為“幸運數”），如果隨機數與擲骰數匹配，則將其計為“頭獎”，並且大數變為黃色。 這不是我的問題很大的一部分，但是可以解釋為什么我的JavaScript中還有第二個隨機數生成器。

我已將所有返回值設置為記錄到控制台以進行調試-移動滑塊手柄時，控制台將記錄高值和低值（以及獲勝百分比，但這與這些目的無關）。 另外，當按下“滾動”按鈕時，被指定為“滾動號”的所生成的隨機數以及被指定為“幸運號”的第二隨機數也被記錄到控制台。

我所描述的大部分內容都已經在頁面上起作用，但有一個大例外：我似乎無法將范圍滑塊設置的值用作我的roller（）函數中的范圍值（我必須手動設置它們-在我的代碼中表示為9和95）。

我試圖從slider函數中獲取值，並在不使用var關鍵字的情況下對其進行聲明，目的是使它們在全局范圍內可訪問，但是roller（）函數似乎仍然無法識別它們。 我懷疑這可能是由於頁面首次加載時未“設置/初始化”滑塊值引起的，但是我對javascript（尤其是jQuery）的了解似乎不足以解決此問題。

我的問題簡單地說：我需要首先確保在頁面加載時范圍滑塊提供的兩個值不為空，其次，我需要一種方法來使用這些值來表示我的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%;
}

對於大量的代碼，我深表歉意-我嘗試擺弄小提琴，但顯示不正確。 那是我的下一個問題...

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');
        }
};

文獻資料

在單獨的函數中使用兩個句柄，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