我试图获取 slider “红色”的值，例如:
red : $('#red').slider('value'),
但它不起作用。谁能告诉我为什么？我正在尝试使用 jQuery slider 创建颜色选择器。
var canvas2D = {
canvas : undefined,
canvasContext : undefined,
x : undefined,
y : undefined,
w : undefined,
h : undefined,
color : undefined,
red : $('#red').slider('value'),
green : $('#green').slider('value'),
blue : $('#blue').slider('value')
};
canvas2D.start = function()
{
canvas2D.canvas = document.getElementById("canvas");
canvas2D.canvasContext = canvas2D.canvas.getContext("2d");
canvas2D.w = 100;
canvas2D.h = 50;
canvas2D.x = canvas2D.canvas.width/2;
canvas2D.y = canvas2D.canvas.height/2;
canvas2D.color = "rgb(" + canvas2D.red + ", " + canvas2D.green + ", " + canvas2D.blue+ ")";
canvas2D.draw();
};
canvas2D.draw = function()
{
canvas2D.canvasContext.fillStyle = canvas2D.color;
canvas2D.canvasContext.fillRect(canvas2D.x - canvas2D.w/2,canvas2D.y - canvas2D.h/2,canvas2D.w,canvas2D.h);
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Color Picker</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas><br>
<label for="red">Red:</label>
<input type="range" name="red" id="red" value="60" min="0" max="255" >
<label for="green">Green:</label>
<input type="range" name="green" id="green" value="60" min="0" max="255" >
<label for="blue">Blue:</label>
<input type="range" name="blue" id="blue" value="60" min="0" max="255">
<script>canvas2D.start();</script>
</body>
</html>最佳答案
您可以简单地使用
获取 input type=range 的值查询
$('#red').val();
Javascript
document.getElementById('#red').value
$('#red').slider('值');是 https://jqueryui.com/ 的方法 slider 组件。我没有看到您的代码中包含或使用了它。
关于javascript - 如何获取 jQuery slider 的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43690521/