Foros del Web » Programando para Internet » Jquery »

Problema con jquery imágenes no responden al onclick

Estas en el tema de Problema con jquery imágenes no responden al onclick en el foro de Jquery en Foros del Web. Buenas tengo un programa casi acabado pero no consigo solucionar un error. Mi programa es una web en que se muestra un un puzzle. El ...
  #1 (permalink)  
Antiguo 30/05/2018, 03:55
 
Fecha de Ingreso: abril-2016
Mensajes: 19
Antigüedad: 7 años, 11 meses
Puntos: 1
Problema con jquery imágenes no responden al onclick

Buenas tengo un programa casi acabado pero no consigo solucionar un error.

Mi programa es una web en que se muestra un un puzzle. El tablero inicialmente está vació y las piezas se encuentran en un div a la derecha.

si seleccionas una ficha se introduce en un div de ficha seleccionada y después lo puedes poner en la casilla que quieras del tablero.

El problema es que si te equivocas al poner la ficha puedes hacer click encima de esta en el tablero y volvera al div donde se encuentran las fichas originalmente para ser seleccionadas. La cuestión es que cuando vuelven a ese div dejan de ser sancionables otra vez y no entiendo porque.

Os pongo tanto el html como el js, por si alguien ve el problema
Muchas Gracias.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <head>
  3.         <title>Puzzle</title>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <link href="puzzle.css" rel="stylesheet" type="text/css"/>
  7.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8.         <script src="puzzle.js" type="text/javascript"></script>
  9.     </head>
  10.     <body>
  11.         <div id="taulell">
  12.             <div class="fitxa" id="fit1"></div>
  13.             <div class="fitxa" id="fit2"></div>
  14.             <div class="fitxa" id="fit3"></div>
  15.             <div class="fitxa" id="fit4"></div>
  16.             <div class="fitxa" id="fit5"></div>
  17.             <div class="fitxa" id="fit6"></div>
  18.             <div class="fitxa" id="fit7"></div>
  19.             <div class="fitxa" id="fit8"></div>
  20.             <div class="fitxa" id="fit9"></div>
  21.         </div>
  22.         <div id="consola">
  23.             <div id="fitxes_iguals">
  24.             </div>
  25.         </div>
  26.         <button id="comprobar">CHECK</button>
  27.         <div id="fitxa_seleccionada">
  28.         </div>
  29.     </body>
  30. </html>

Código Javascript:
Ver original
  1. var x;
  2. x = $(document);
  3. x.ready(inicializarEventos);
  4. function inicializarEventos()
  5. {
  6.     var fitxes_inici = {
  7.         fitxa1: "img1"
  8.         , fitxa2: "img3"
  9.         , fitxa3: "img5"
  10.         , fitxa4: "img7"
  11.         , fitxa5: "img6"
  12.         , fitxa6: "img2"
  13.         , fitxa7: "img4"
  14.         , fitxa8: "img9"
  15.         , fitxa9: "img8"
  16.     };
  17.  
  18.     var fitxes_final = {
  19.         fitxa1: "img1"
  20.         , fitxa2: "img2"
  21.         , fitxa3: "img3"
  22.         , fitxa4: "img4"
  23.         , fitxa5: "img5"
  24.         , fitxa6: "img6"
  25.         , fitxa7: "img7"
  26.         , fitxa8: "img8"
  27.         , fitxa9: "img9"
  28.     };
  29.     //ponemos las fotos
  30.     var guardar = "";
  31.     $.each(fitxes_inici, function (indice, valor) {
  32.         var nuevaImg = $("<img src='fotos/" + valor + ".jpg'>");
  33.         $("#fitxes_iguals").append(nuevaImg);
  34.     });
  35.     //poner en fitxa selec
  36.     $("img").on('click', function () {
  37.         if ($("#fitxa_seleccionada:has(img)").length > 0) {
  38.             alert("Ya tienes una fitxa seleccionada");
  39.         } else {
  40.             var cogerSrc = $(this).attr('src');
  41.             guardar = cogerSrc;
  42.             var selecImg = $("<img src='" + cogerSrc + "'>");
  43.             $("#fitxa_seleccionada").html(selecImg);
  44.             $(this).removeAttr('src');
  45.         }
  46.     });
  47.     //poner tablero
  48.     $(".fitxa").on('click', function () {
  49.         var cogerID = $(this).attr('id');
  50.         //ya tiene una fitxa
  51.         if ($("#" + cogerID + ":has(img)").length > 0) {
  52.             var volver = $("#" + cogerID + " img").attr("src");
  53.             $("#fitxes_iguals").append("<img src='" + volver + "'>");
  54.         }
  55.         var cogerID = $(this).attr('id');
  56.         $("#" + cogerID + "").html("<img src='" + guardar + "'>");
  57.         $("#fitxa_seleccionada").empty();
  58.         guardar = "";
  59.  
  60.     });
  61.  
  62.     //check
  63.     var control = 1;
  64.     var todoBien = true;
  65.     $("#comprobar").on('click', function () {
  66.         $.each(fitxes_final, function (indice, valor) {
  67.             var src = $("#fit" + control + " img").attr("src");
  68.             var comparar = 'fotos/' + valor + '.jpg';
  69.             if (comparar === src) {
  70.                 $("#fit" + control + "").css("border-color", "green");
  71.             } else {
  72.                 $("#fit" + control + "").css("border-color", "red");
  73.                 todoBien = false;
  74.             }
  75.             control++;
  76.         });
  77.         if (todoBien === true) {
  78.             alert("Felicidades puzzle correcto");
  79.         }
  80.     });
  81. }

Etiquetas: onclick
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:38.