Question

我目前正在创建一个由多个 HTML范围组成的应用程序。

<input id="r1" type="range" min="0" max="100" value="50" step="50" onChange="showValue(this.value)" />

在值更改时，将调用以下函数：

function showValue(newValue) 
{
    if (newValue == 100) 
    {
        document.getElementById("range").innerHTML = "Calm";
        mood = "Calm"; 
        resetContent(); 
        getContent(mood);  
    } 
    else if (newValue == 0)
    {
        document.getElementById("range").innerHTML = "Agitated"; 
        resetContent();
        mood = "Agitated"; 
        getContent(mood); 
    }
    else
    {
        document.getElementById("range").innerHTML = ""; 
        resetContent(); 
    }
}

getContent将心情作为参数，并搜索xml文件并返回与心情匹配的所有结果：

function getContent(mood) {
    $(xmlDoc).find("program").each(function(){
            // this is where all the reading and writing will happe
            if ($(this).find('mood').text() == mood) {
            $("#content").append(
                '<p>Name: ' + $(this).find('name').text() + 
                '<br> Mood: ' + $(this).find('mood').text() + 
                '</p>'
                );
            }
        });
}

我的目标是创造一个具有不同情绪的aditional 3范围。我如何处理showValue函数中的不同范围，以便它们都能独立工作？

Answer 1

您要做的是让所有输入使用相同的功能，但根据其某些属性执行不同的操作，在本例中为id：

function doIt($elem) {
    if ($elem.attr('id') == 'r1') {
        $("#output").html('action1' + $elem.val());
    }
    else if ($elem.attr('id') == 'r2') {
        $("#output").html('action2' + $elem.val());
    }
}

$('input').on('input', function(){
    doIt($(this));
});

https://jsfiddle.net/xb51Lqnb/7/

Answer 2

您可以在javascript中创建一个数组来保存心情的值

    var moods=[["Agitated","Calm"],["sad","happy"],["angry","smiling"]];
    function showValue(newValue,id) {
    if (newValue == 100) 
    {
        document.getElementById("range").innerHTML = moods[id][1];
        mood = moods[id][1]; 
        resetContent(); 
        getContent(mood);  
    } 
    else if (newValue == 0)
    {
        document.getElementById("range").innerHTML = moods[id][0]; 
        resetContent();
        mood = moods[id][0]; 
        getContent(mood); 
    }
    else
    {
        document.getElementById("range").innerHTML = ""; 
        resetContent(); 
    }
}

演示：https://jsfiddle.net/9y1foc5s/

区分输入范围

2 个答案: