如何自定义质量滑块问题中的值？

Question

我正在尝试在质量中自定义滑块问题。我正在处理一个按 4 个增量（0、25、50、75、100）缩放的问题，其中答案会按增量对齐，因此我可以使 Likert 问题更加直观（因此使用标签为“强烈不同意”、“中立”和“强烈同意”）。但是，我想更改每个栏上显示的值，该值默认指的是数字增量，而是为每个选项呈现自定义文本（例如：“强烈不同意”、“有些不同意”、“中立”、 “有点同意”和“强烈同意”）。

经过一番研究，我想实现这一点的唯一方法是通过javascript。但是，我对这种语言一无所知，只找到了我需要修改的代码：

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery('.ResultsInput').change(function()
{
updateTT(jQuery(this));
});

jQuery('.trackHolderRel').mousedown(function()
{
updateTT(jQuery(this));
});

function updateTT(element)
{
console.log(jQuery(element).find('.sliderToolTipBox').length)
if(jQuery(element).find('.sliderToolTipBox').length==1)
jQuery(element).find('.sliderToolTipBox').parent().append('<div class="sliderToolTipBox">2</div>')
jQuery(element).find('.sliderToolTipBox').eq(0).hide();
jQuery(element).find('.sliderToolTipBox').eq(1).html('Strongly disagree')
}

});

我想这是一件愚蠢的事情（希望如此），但我不知道如何继续。现在，每个选项总是显示“强烈不同意”，如图所示。另外，当我选择左侧选项时，一半的文本会被从窗口中切除，但这宁愿成为次要问题......

在此输入图片描述

非常感谢您的帮助！谢谢:)

Answer 1

你也许可以这样做。

const answers = {
    0: "Strongly disagree",
    25: "Disagree",
    50: "Neutral",
    75: "Agree",
    100: "Strongly agree"
};

function updateTT(element,message) {
    console.log(jQuery("div.sliderToolTipBox:last-child"));
    let toChange = element.parent().find("div.sliderToolTipBox:last-child");
    if(toChange.length > 0) {
        toChange.html(message);
    }
}

jQuery(document).on("change","input[name*=\"QR~QID56\"]",function() {
    let val = jQuery(this).val();
    let txt = answers[val];

    updateTT(jQuery(this),txt);
});

为了使其正常工作，您必须删除

mousedown

事件处理程序，因为这会将文本恢复为原始代码中的内容（硬编码文本

Strongly disagree

）。

此外，通过查看您提供的链接上的调查，我发现输入名称遵循

QR~QID56~<integer>

的模式。如果您的调查中的其余输入属于这种情况，您可以使用部分 属性选择器 匹配 - 这就是这部分的用途：

"input[name*=\"QR~QID56\"]"

我依赖的另一件事（再次，通过查看您提供的链接上的渲染代码）是文本的容器（强烈不同意，不同意等）始终是

div.sliderToolTipBox

，并且它始终是最后一个一个（因此是

:last-child

选择器）。

最后，

change

事件处理程序附加到

jQuery(document)

，而不是特定的节点集合（输入），因为我不确定加载文档后输入是否存在。