Question

我试图获得滑块'red'的值，如：

red : $('#red').slider('value'),

但它不起作用。谁能告诉我为什么？我正在尝试使用jQuery滑块创建颜色选择器。

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>

Answer 1

只需使用

即可获得输入类型=范围的值

Jquery的

document.getElementById('#red').value

Javascript

<Carousel>
    <Carousel.Item>
      <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
    </Carousel.Item>
</Carousel>

$（＆＃39;＃红色＆＃39）。滑块（＆＃39;值＆＃39）;是https://jqueryui.com/滑块组件的方法。我不喜欢＆＃39;看到你的代码中包含或使用了它。

我如何获得jQuery滑块的价值？

1 个答案: