Question

我从选择菜单中选择主题。当我选择一个主题时，会显示该主题数组中的随机项。

当我从主题中选择时，我会替换第一个数组中的项目并获得结果。

当我在选择菜单中选择颜色值时，我用颜色数组替换animals数组并得到随机项。我对语言数组做同样的事情，但是当我再次得到动物时它不起作用。

从选择菜单中选择一个选项，然后选择＆＃34; animals＆＃34; option.You看到没有来自＆＃34;动物＆＃34;阵列

解决方案是什么？

  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

您不想覆盖您的动物阵列。这就是为什么它不起作用。在这种情况下，您也可以使用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;
    }    
  });
});

Answer 2

这是因为当您选择颜色或语言选项时，您已覆盖动物数组。也没有使用有效传递整个数组的slice(0)。只需根据选择选项

将数组传递给getRandom()函数

$(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);
    }
  });
 });

您修改后的JSfiddle

Answer 3

你正在覆盖你的动物阵列，这就是它无法正常工作的原因。为了保存您的结果，您应该使用另一个变量来保存您的选择。

您可以看到我刚刚添加了一个名为selection的新变量，以使其按预期工作：Demo

使用slice（）方法替换数组项，然后撤消它

3 个答案: