スライス（）メソッドを使用して配列項目を置き換えてから元に戻す

Question

私は選択メニューからトピックを選択しています。トピックを選択すると、そのトピックの配列からランダムな項目が表示されます。

トピックから選択すると、最初の配列のアイテムが置き換えられ、結果が得られます。

私は選択メニューで色の値を選択すると、私は動物の配列を色の配列に置き換え、ランダムな項目を取得します。私は言語配列に対しても同じことをしますが、

選択メニューからオプションを選択し、「animals」オプションを選択します。「animals」配列の項目はありません。

解決策は何ですか。

JSFIDDLE

var animals = ["horse", "cat"]; 
    var colors = ["black", "white"]; 
    var languages = ["javascript", "css"]; 

    function getRandom(arr) { 
    return arr[Math.floor(Math.random() * arr.length)]; 
    } 

    var random = getRandom(animals); 
    $(".word").append(random); 

    $("#select").change(function() { 
    var val = $(this).val(); 
    if (val === "colors") { 
     animals = colors.slice(0); 
     random = getRandom(animals); 
     $(".word").empty(); 
     $(".word").append(random); 
    } else if (val === "languages") { 
     animals = languages.slice(0); 
     random = getRandom(animals); 
     $(".word").empty(); 
     $(".word").append(random); 
    } else { 
     random = getRandom(animals); 
     $(".word").empty(); 
     $(".word").append(random); 
    } 
    }); 

Answer 1

あなたは色や言語オプションを選択したときに、あなたの動物の配列を上書きしているためです。また、配列全体を効果的に通過するslice(0)の使用もありません。ちょうどあなたのあなたの動物の配列を上書きしているJSfiddle

Answer 2

を変更選択オプション

$(function() { 

    var animals = ["horse", "cat"]; 
    var colors = ["black", "white"]; 
    var languages = ["javascript", "css"]; 

    function getRandom(arr) { 
    return arr[Math.floor(Math.random() * arr.length)]; 
    } 

    var random = getRandom(animals); 
    $(".word").append(random); 

    $("#select").change(function() { 
    var val = $(this).val(); 
    if (val === "colors") { 
     //animals = colors.slice(0); 
     random = getRandom(colors); 
     $(".word").empty(); 
     $(".word").append(random); 
    } else if (val === "languages") { 
     //animals = languages.slice(0); 
     random = getRandom(languages); 
     $(".word").empty(); 
     $(".word").append(random); 
    } else { 
     random = getRandom(animals); 
     $(".word").empty(); 
     $(".word").append(random); 
    } 
    }); 
}); 

に基づいてgetRandom()関数に配列を渡す、それはそれが正常に動作していない理由です。あなたの選択を保存するには、別の変数を使用して選択内容を保存してください。

あなたは、私はちょうど予想通り、それは仕事を得るためにselectionと呼ばれる新しい変数を追加しました見ることができます：Demo

Answer 3

あなたの動物の配列を上書きしたくありません。そういうわけではないのです。この場合、switch文を使用することもできます。

$(function() { 

    var animals = ["horse", "cat"]; 
    var colors = ["black", "white"]; 
    var languages = ["javascript", "css"]; 

    function getRandom(arr) { 
    return arr[Math.floor(Math.random() * arr.length)]; 
    } 

    var random = getRandom(animals); 
    $(".word").append(random); 

    $("#select").change(function() { 
    var val = $(this).find('option:selected').val();  
    switch(val){ 
     case "colors":   
     random = getRandom(colors); 
     $(".word").empty(); 
     $(".word").append(random); 
     break; 
     case "languages":   
     random = getRandom(languages); 
     $(".word").empty(); 
     $(".word").append(random); 
     break; 
     default:   
     random = getRandom(animals); 
     $(".word").empty(); 
     $(".word").append(random); 
     break; 
    }  
    }); 
});