Javascript 我的开关有问题。它能用一次，但不能用两次

我正在做一个练习javascript的游戏。游戏的目标如下：屏幕上显示多个动物图像。当用户单击“播放”按钮时，会出现“单击鸭子”类型的命令。用户单击鸭子后，图像将消失，并且此指令将不再显示。我编写的代码几乎可以工作。我的问题是：一旦用户点击了一个图像并再次点击“播放”，什么都不会发生。控制台中将显示未定义的script.js:39。多谢各位

$(document).ready(function() { /*LES CONSIGNES SONT INVISIBLES*/
  $('#canard').hide();
  $('#cheval').hide();
  $('#cochon').hide();
  $('#coq').hide();
  $('#elephant').hide();
  $('#lion').hide();
  $('#mouton').hide();
  $('#paon').hide();
  $('#pinguin').hide();
  $('#singe').hide();
  $('#vache').hide();
  $('#zebre').hide(); /*DEFINITION DES VARIABLES*/
  var image_canard = $('#image_1');
  var image_cheval = $('#image_2');
  var image_cochon = $('#image_3');
  var image_coq = $('#image_4');
  var image_elephant = $('#image_5');
  var image_lion = $('#image_6');
  var image_mouton = $('#image_7');
  var image_paon = $('#image_8');
  var image_pinguin = $('#image_9');
  var image_singe = $('#image_10');
  var image_vache = $('#image_11');
  var image_zebre = $('#image_12');
  /*CREATION D'UN TABLEAU AVEC TOUTES
LES IMAGES*/
  var tableau = [image_canard, image_cheval, image_cochon, image_coq, image_elephant, image_lion, image_mouton, image_paon, image_pinguin, image_singe, image_vache, image_zebre]; /*FONCTION EXECUTEE AU MOMENT DU CLIC SUR "JOUER"*/
  $('#jouer').on('click',
    function() { /*PIOCHE ALEATOIRE DANS LE TABLEAU*/
      var random = tableau[Math.floor(Math.random() * tableau.length)];
      console.log(random); /*SWITCH EN FONCTION DE LA PIOCHE*/
      switch (random) {
        case image_canard:
          $('#canard').show();
          ($('#image_1').on('click',
            function() {
              $('#image_1').hide();
              $('#canard').hide();
              tableau.splice(image_canard);
            }));
          break;
        case image_cheval:
          $('#cheval').show();
          ($('#image_2').on('click', function() {
            $('#image_2').hide();
            $('#cheval').hide();
            tableau.splice(image_cheval);
          }));
          break;
        case image_cochon:
          $('#cochon').show();
          ($('#image_3').on('click', function() {
            $('#image_3').hide();
            $('#cochon').hide();
            tableau.splice(image_cochon);
          }));
          break;
        case image_coq:
          $('#coq').show();
          ($('#image_4').on('click', function() {
            $('#image_4').hide();
            $('#coq').hide();
            tableau.splice(image_coq);
          }));
          break;
        case image_elephant:
          $('#elephant').show();
          ($('#image_5').on('click', function() {
            $('#image_5').hide();
            $('#elephant').hide();
            tableau.splice(image_elephant);
          }));
          break;
        case image_lion:
          $('#lion').show();
          ($('#image_6').on('click', function() {
            $('#image_6').hide();
            $('#lion').hide();
            tableau.splice(image_lion);
          }));
          break;
        case image_mouton:
          $('#mouton').show();
          ($('#image_7').on('click', function() {
            $('#image_7').hide();
            $('#mouton').hide();
            tableau.splice(image_mouton);
          }));
          break;
        case image_paon:
          $('#paon').show();
          ($('#image_8').on('click', function() {
            $('#image_8').hide();
            $('#paon').hide();
            tableau.splice(image_paon);
          }));
          break;
        case image_pinguin:
          $('#pinguin').show();
          ($('#image_9').on('click', function() {
            $('#image_9').hide();
            $('#pinguin').hide();
            tableau.splice(image_pinguin);
          }));
          break;
        case image_singe:
          $('#singe').show();
          ($('#image_10').on('click', function() {
            $('#image_10').hide();
            $('#singe').hide();
            tableau.splice(image_singe);
          }));
          break;
        case image_vache:
          $('#vache').show();
          ($('#image_11').on('click', function() {
            $('#image_11').hide();
            $('#vache').hide();
            tableau.splice(image_vache);
          }));
          break;
        case image_zebre:
          $('#zebre').show();
          ($('#image_12').on('click', function() {
            $('#image_12').hide();
            $('#zebre').hide();
            tableau.splice(image_zebre);
          }));
          break;
      }
    });
});

你使用不正确

此函数要求第一个参数是一个数字，该数字将用作从中删除元素的起始索引。您可以传递第二个参数来指定要删除的项目数（默认情况下，从索引到结尾都是）

您正在使用的参数（jQuery对象）被解释为

0

，这就是为什么

tableau

在第一次函数运行后被清空的原因

要解决此问题，请将对

.splice（…）

的所有调用替换为：

tableau.splice(tableau.indexOf(random), 1);

---

你的代码看起来很重复，为什么不为它创建一个函数呢？而且，它不可伸缩，因为你使用的是唯一的ID，所以对于每个ID，你必须编写一个单独的案例。。相反，考虑使用数据属性并设置触发器，从JS开始，WY我的代码不是很好…我只是想做点事。我想我以后会完善它。你不能匹配jQuery对象。。。。有很多更好的方法可以做到这一点，而不需要重复代码。非常感谢。它起作用了，我理解了你解释的错误。我会尽量减少重复的代码，但我很高兴它能工作。非常感谢。