2014-01-13 3 views
0

Делают пагинации с JQuery Ajax, PHP и MySQL, 1 на 1.Jquery по щелчку, выполнить слишком много раз

Я хочу, чтобы показать карты с именем и описанием.

Здесь я оставляю свой код. index.php

<?php 
require_once './conexiones.php'; 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="Content-Language" content="kr"> 
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> 
    <link rel="stylesheet" type="text/css" href="cards.css"> 
    <meta http-equiv="Content-Language" content="ko"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF8"> 
    <title></title> 
    <script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>  
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="card.js"></script> 
</head> 
<body> 

       <?php 
// ----- CONSULTA PALABRAS POR CATEGORIA 
    if((isset($_GET['idcat']))||(isset($_GET['limite']))){ 
     $consulta = " 
        SELECT nompalabra, trapalabra, rompalabra, imgpalabra, ejpal, ejrompal, ejtrapal 
        FROM palabra 
        WHERE idcat = '". $_GET['idcat'] ."' 
        LIMIT ". $_GET['limit'].",1 
        "; 
     echo $consulta; 
     $resultado = mysql_query($consulta,$conexion); 
    } 

     //----- FIN 

     //CONSULTA TODAS LAS CATEGORIAS 
     $consultaCategorias = " 
        SELECT nomcat 
        FROM categorias"; 
     $resultadoCategorias = mysql_query($consultaCategorias,$conexion); 
     // 
require_once './carta.php'; 
?>     

    </body> 

cards.js

var limit = 0; 

$(document).on("click",".cat",function(){ 
var cat = $(this).attr('name'); 
limit = 0; 
var id; 
switch (cat){ 
    case 'casa': id = 1; 
     break; 
    case 'colores': id = 2; 
     break; 
    case 'cuerpo': id = 3; 
     break; 
} 

$.get("index.php",{"idcat":id,"limit":limit},function(data) {$("#contenedor").html(data);});         
}); 

$(document).on("click",".next",function(){ 
var id = $(this).attr('name'); 
limit++; 
$.get("index.php",{"idcat":id,"limit":limit},function(data){$("#contenedor").html(data);}); 
}); 


$(document).on("click",".back",function(){ 
var id = $(this).attr('name'); 
limit--; 
$.get("index.php",{"idcat":id,"limit":limit},function(data){$("#contenedor").html(data);}); 
}); 

cartas.php

<?php 
require_once './consultas.php'; 
?><div id="contenedor"><?php 
       while($categoria = mysql_fetch_array($resultadoCategorias)){ 
        ?><div class="cat" name="<?php echo $categoria['nomcat'];?>"><?php echo $categoria['nomcat'];?></div> <?php 

       } 
       if(isset($_GET['idcat'])){ 
       ?> 

       <div id="container_card"> 

        <div id="container_card_top"> 

         <div class="centrar"> <?php 
          while ($fila = mysql_fetch_array($resultado)) { 
           echo $fila['nompalabra']."(".$fila['rompalabra'].") ".$fila['trapalabra']; 

          ?> 
         </div> 

        </div><!-- FIN CONTAINER_CARD_TOP --> 

        <div id="container_card_content"> 
         <div id="imagenPalabra"><?php echo $fila['imgpalabra'];?></div> 
         <div class="frase"><?php echo $fila['ejpal'];?></div> 
          <?php } ?> 
         <div class="next" name="<?php echo $_GET['idcat'];?>">-></div> 
         <?php if($_GET['limit']>0){ ?><div class="back" name="<?php echo $_GET['idcat'];?>"><-</div><?php } ?> 
        </div><!-- FIN CONTAINER_CARD_CONTENT --> 

       </div><!-- FIN CONTAINER_CARD --> 
       <?php } ?> 

каждый раз, когда я нажимаю .next, счетчик должен быть 0, 1, 2, 3 ... но когда я делаю первый раз, функция jQuery выполняется 2 раза, а в следующий раз, когда я нажимаю на нее, она выполняет больше раз, поэтому я не могу показать 1 к 1, и я не знаю, как это исправить. Я уже много пробовал.

+0

просто разместить код, где вы чувствуете себя неправильно. –

+1

Попробуйте изменить селектор в событии click от $ (document) до более конкретных $ ('. Cat'), $ ('. Next') и т. Д. Подобно: $ ('. Cat'). On ("click" function() {... – Xardas

+0

просьба указать ** только ** соответствующий код –

ответ

0

Может быть, при каждом клике сценарий снова создает те же обработчики ...

Попробуйте изменить cards.js к чему-то вроде этого:

var limit = 0; 

$(document).ready(function() { 
    $('.cat').click(function() { 
     var cat = $(this).attr('name'); 
     limit = 0; 
     var id; 
     switch (cat){ 
      case 'casa': 
       id = 1; 
       break; 
      case 'colores': 
       id = 2; 
       break; 
      case 'cuerpo': 
       id = 3; 
       break; 
     } 

     $.get("index.php",{ 
      "idcat":id, 
      "limit":limit 
     },function(data) { 
      $("#contenedor").html(data); 
     }); 
    }); 

    $('.next').click(function() { 
     var id = $(this).attr('name'); 
     limit++; 
     $.get("index.php",{ 
      "idcat":id, 
      "limit":limit 
     },function(data){ 
      $("#contenedor").html(data); 
     }); 
    }); 

    $('.back').click(function() { 
     var id = $(this).attr('name'); 
     limit--; 
     $.get("index.php",{ 
      "idcat":id, 
      "limit":limit 
     },function(data){ 
      $("#contenedor").html(data); 
     }); 
    }); 
}); 
Смежные вопросы