Question

我正在做一个练习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;
      }
    });
});

Answer 1

您使用的.splice()错误。

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

您正在使用的参数（一个jQuery对象）被解释为<audio autoplay> <source src="http://localhost:8080" type="audio/mpeg"> </audio>，这就是为什么在运行第一个函数后清空0的原因。

要解决此问题，请将对tableau的所有呼叫替换为：

.splice(...)

我的开关有问题。它一次只能工作两次

1 个答案: