區分輸入范圍

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>'
                );
            }
        });
}

我的目標是創建一個具有不同情緒的附加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/