控制jquery栏的值

Control the value of jquery bar

本文关键字：jquery 控制      更新时间：2023-09-26

如何在jQuery中检查进度条的值？假设我按下一个按钮，它会达到50%，如果我按下25%的按钮，我想得到一个警报，上面写着"你不能低于50%"

<!DOCTYPE HTML>
<html>
<head>
  <link rel="shortcut icon" href="../test/pics/bbti.png" />
  <title>Bing Bang Theory</title>
  <link rel="stylesheet" type="text/css" href="../test/css/style2.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
  <h1>bbt</h1>
  <!--progress bar start-->
  <div id="progressbar"></div>
  <br />
  <button onclick="set25()">Set to 25%</button>
  <button onclick="set50()">Set to 50%</button>
  <button onclick="set75()">Set to 75%</button>
  <button onclick="set100()">Set to 100%</button>
  <script>
    $(function() {
      $("#progressbar").progressbar({
        value: 0
      });
    });
    // Set progressbar to 25%
    function set25() {
      //somewhere here is the code about if statement. 
      $("#progressbar").progressbar("option", "value", 25);
    }
    // Set progressbar to 50%
    function set50() {
      $("#progressbar").progressbar("option", "value", 50);
    }
    // Set progressbar to 75%
    function set75() {
      $("#progressbar").progressbar("option", "value", 75);
    }
    // Set progressbar to 100%
    function set100() {
      $("#progressbar").progressbar("option", "value", 100);
    }
  </script>
  <!--progress bar stops-->
</body>
</html>

你能帮我解决吗？谢谢

不需要像set25、set50。。。有一个单一的功能并向其发送值。类似于这个

function set(progressBarValue){}

并称之为

<button onclick="set(25)">Set to 25%</button>
<button onclick="set(50)">Set to 50%</button>
<button onclick="set(75)">Set to 75%</button>
<button onclick="set(100)">Set to 100%</button>

为了获得进度条的当前值，您可以执行此

$("#progressbar").progressbar("option", "value");

总的来说，它应该看起来像这个

var myprogressbar;
$(document).ready(function () {
    myprogressbar = $("#progressbar").progressbar({
        value: 0
    });
});
function set(val) {
    var currVal = myprogressbar.progressbar("option", "value");
    if(currVal > val){
        alert('Cannot go lower');
        return;
    }
    myprogressbar.progressbar("option", "value", val);
}

这是一个演示http://jsfiddle.net/dhirajbodicherla/NAs3V/381/

您可以使用一个函数来执行操作。并且您可以避免内联JS，这对于维护来说可能是一场噩梦。

$(function () {
    $("#progressbar").progressbar({
        value: 0
    });
    $('button[data-value]').on('click',function() {
        var pbar = $('#progressbar'),
            value = $(this).data('value'),
            curValue = pbar.progressbar('value');
        if( value < curValue ) {
            alert("You can't go under " + curValue +"%!");
        } else {
            pbar.progressbar( 'value', value );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="progressbar"></div>
<br />
<button data-value="25">Set to 25%</button>
<button data-value="50">Set to 50%</button>
<button data-value="75">Set to 75%</button>
<button data-value="100">Set to 100%</button>

相关文章：