大佬教程收集整理的这篇文章主要介绍了为单个调查问题分配范围滑块值，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Heloooo，我是开发新手，如果代码看起来很糟糕，我很抱歉。我正在构建一个调查，其中每个问题都有一个值从 0 到 100 的范围滑块，我试图从范围滑块中获取数字并将其分配给它的问题。每个问题都是数组中的一个对象，我试图将范围结果添加为键值对。如果用户更改输入，它还需要更新。我尝试了很多不同的方法，但没有任何效果，我认为我的范围有问题，因为“this”始终是 Window 对象而不是问题。请帮忙！
<body>
<div class="container">
</div>
<!-- Using only Js -->
<ul ID="questions">
<!-- questions will be appended here -->
</ul>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.Js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
var questionList = document.getElementByID("questions");
var slIDer = document.getElementByID("q-slIDer");
var range = document.querySELEctor(".testRange");
var questions = [
{
Q :"You create visions and translate them to strategy and action.",ID: 1,result : ''
},{
Q :"you work with initiative and are responsible about results",ID: 2,{
Q :"You spot and harness opportunitIEs to create growth and profitability",ID: 3,{
Q :"You focus to end-result,spot risks and think impact of your action",ID: 4,{
Q :"You negotiate,promote and influence to achIEve results.",ID: 5,{
Q :"You meet new people,create network to achIEve results.",ID: 6,{
Q :"You provIDe clarity,inspiration and focus to team achIEve object",ID: 7,{
Q :"You coach,teach and develop people for their growth",ID: 8,{
Q :"You recognize informal rules and political processes to get results.",ID: 9,{
Q :"you work by following rules and procedures to achIEve results.",ID: 10,{
Q :"You prioritize systematically resource alLOCATIOn to achIEve results.",ID: 11,{
Q :"You stay steady and supportive even under stress to produce results. ",ID: 12,{
Q :"You analyze complex data and create clear conclusions.",ID: 13,{
Q :"You develop conTinuosly your professional expertise and kNowledge.",ID: 14,{
Q :"You create new,even imaginative solutions and perspectives to problems ",ID: 15,{
Q :"You communicate clearly and effectively.",ID: 16,{
Q :"you work well with others toWARDs common goals",ID: 17,{
Q :"You kNow your strengths and weaknesses well.",ID: 18,]
var designer = [];
var plAnner = [];
var activator = [];
// Create questions
for (i=0; i <= questions.length -1; i++) {
const li = document.createElement('li');
let question = questions.map(a => a.Q);
li.INNERHTML = question[i];
questionList.appendChild(li);
}
// Add slIDers to each question
$('li').append('<form class="q-slIDer"></form>');
$('.q-slIDer').append('<div class="range question"></div>');
$('.question').append('<input class="testRange" type="range" min="0" max="100" step="1" value="50" data-orIEntation="vertical">');
// find ID
questions.forEach(function (question) {
let ID = questions.map(a => a.ID);
});
// const answerMap = {};
$(".testRange").on("change",function() {
var value = $(this).val();
var question = $(this)[0].ID;
questions[question] = value;
// console.log(questions);
});
console.log(question.ID);
</script>
</body>
要执行您的要求，您可以将事件处理程序挂接到滑块的 input 事件。从那里您可以使用它的索引来检索数组中的匹配问题，并使用滑块中的值更新 result 属性。试试这个：
let questions = [{ Q: "You create visions and translate them to strategy and action.",result: '' },{ Q: "you work with initiative and are responsible about results",{ Q: "You spot and harness opportunities to create growth and profitability",result: '' }]
let $questionList = $('#questions');
let questionHtml = questions.map(q => `<li>${q.Q}<div class="range question"><input class="testRange" type="range" min="0" max="100" step="1" value="50" data-orientation="vertical"><span class="value">50</span></div></li>`);
$questionList.append(questionHtml);
$questionList.on('input','.testRange',e => {
let $slider = $(e.target);
$slider.next('span').text($slider.val());
questions[$slider.index('.testRange')].result = $slider.val();
});
$('#debug').on('click',() => console.log(questions));<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="container"></div>
<ul id="questions"></ul>
<button id="debug">Get results</button>以上是大佬教程为你收集整理的为单个调查问题分配范围滑块值全部内容，希望文章能够帮你解决为单个调查问题分配范围滑块值所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。