将范围滑块值分配给单个调查问题答案

【问题标题】：Assigning range slider value to individual survey question将范围滑块值分配给单个调查问题
【发布时间】：2021-04-19 17:52:22
【问题描述】：

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,
        result : '' 
    },
    {
        Q :"You spot and harness opportunities to create growth and profitability",
        id: 3,
        result : '' 
    },
    {
        Q :"You focus to end-result, spot risks and think impact of your action",
        id: 4,
        result : '' 
    },
    {
        Q :"You negotiate, promote and influence to achieve results.",
        id: 5,
        result : '' 
    },
    {
        Q :"You meet new people, create network to achieve results.",
        id: 6,
        result : '' 
    },
    {
        Q :"You provide clarity, inspiration and focus to team achieve object",
        id: 7,
        result : '' 
    },
    {
        Q :"You coach, teach and develop people for their growth",
        id: 8,
        result : '' 
    },
    {
        Q :"You recognize informal rules and political processes to get results.",
        id: 9,
        result : '' 
    },
    {
        Q :"You work by following rules and procedures to achieve results.",
        id: 10,
        result : '' 
    },
    {
        Q :"You prioritize systematically resource allocation to achieve results.",
        id: 11,
        result : '' 
    },
    {
        Q :"You stay steady and supportive even under stress to produce results. ",
        id: 12,
        result : '' 
    },
    {
        Q :"You analyze complex data and create clear conclusions.",
        id: 13,
        result : '' 
    },
    {
        Q :"You develop continuosly your professional expertise and knowledge.",
        id: 14,
        result : '' 
    },
    {
        Q :"You create new, even imaginative solutions and perspectives to problems ",
        id: 15,
        result : '' 
    },
    {
        Q :"You communicate clearly and effectively.",
        id: 16,
        result : '' 
    },
    {
        Q :"You work well with others towards common goals",
        id: 17,
        result : '' 
    },
    {
        Q :"You know your strengths and weaknesses well.",
        id: 18,
        result : '' 
    },
    ]

    
    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>

【问题讨论】：

标签： javascript jquery object key-value

【解决方案1】：

要执行您需要的操作，您可以将事件处理程序挂钩到滑块的 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", result: '' }, { 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>

【讨论】：