Javascript/JQuery 多个滑块一页答案

【问题标题】：Javascript/JQuery multiple sliders one pageJavascript/JQuery 多个滑块一页
【发布时间】：2020-03-17 16:40:30
【问题描述】：

这里是新手，试图在一页上放置多个滑块。已引用其他堆栈溢出帖子。挂断尝试显示滑块值。

这是 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();
});

从我在这里看到的： Multiple Jquery simple sliders on one page 最后没有调用函数时，我遇到了全局变量问题。基本上，两个滑块都会在第一个 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));
});

});

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：