Question

Javascript / JQuery多个滑块一页

2020-03-17

254

javascript jquery

新手，尝试将多个滑块放在一页上。参考了其他 stack overflow 帖子。尝试显示滑块值时挂断。

这是 HTML：

<div>  
<div id="http" class="ui-widget-content">
<p style="text-align:center">slider1</p>
<input id="users1"/>
<div id="slider1"></div>
</div>

<div>  
<div id="http" class="ui-widget-content">
<p style="text-align:center">slider2</p>
<input id="users2"/>
<div id="slider2"></div>
</div>

这是我编写的 javascript：

$('#slider').slider({
  min: 0,
  max: 50,
  value: 1,
  step: 1,
slide: function (event, ui) {
        $( "#users").val(ui.value);
    }
 });

$("#users").change(function () {
    var numusers = slider.children("#users")
    $("#slider").slider("numusers", parseInt(this.value));
});
$(document).ready(function () {
    $('#slider1').slider();
    $('#slider2').slider();
    $('#users1').users();
    $('#users2').users();
});

从我在这里看到的内容来看：一页上有多个 Jquery 简单滑块当最后不调用函数时，我遇到了全局变量问题。基本上两个滑块都会移动第一个 div 中用户 ID 的值。

以下是我开始参考的内容：

$(document).ready(function () {
    $(".slider").slider({
  min: 0,
  max: 50,
  value: 1,
  step: 1,
slide: function (event, ui) {
        $( "#users").val(ui.value);
    }
 });

$("users").change(function () {
    $("#slider").slider("users", parseInt(this.value));
});

});

Answer 1

你最大的问题是选择器。每个元素必须具有唯一的 ID。例如，jquery 永远不会知道谁是“#users”，因为没有任何带有此 ID 的标签，因此你应该更改为 users1 或 users2

slide: function (event, ui) {
    $( "#users2").val(ui.value);
}

我准备了一个 JSFiddle，其中包含一个可以运行的示例 https://jsfiddle.net/kevynsax/jnwhoztp/1/

const getUpdaterSlide = (slider, input) => () => {
	const numUsers = $("#"+input).val();
  console.log(slider);
  $("#"+slider).slider("option", "value", numUsers);
}

const getUpdaterInput = input => (event, ui) => $("#"+input).val(ui.value);

const options = {
  min: 0,
  max: 50,
  value: 1,
  step: 1,
}

const getOptions = input => ({...options, slide: getUpdaterInput(input)});

$(document).ready(function () {
	[
  	{slider: "slider1", input: "users1"}, 
    {slider: "slider2", input: "users2"}
  ].forEach(({slider, input}) => {
  	$('#'+slider).slider(getOptions(input));
    $('#'+input).change(getUpdaterSlide(slider, input));
  });
});

body {
  margin: 0;
}

.ui-widget-content{
  margin: 24px 16px;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>


<div>  
  <div id="http" class="ui-widget-content">
    <p style="text-align:center">slider1</p>
    <input id="users1" value="0"/>
    <div id="slider1"></div>
  </div>

  <div id="http2" class="ui-widget-content">
    <p style="text-align:center">slider2</p>
    <input id="users2" value="0"/>
    <div id="slider2"></div>
  </div>
</div>