Question

我正在使用jQuery Ajax，php和mysql，1合1。

我想展示名片和说明卡片。

这里我留下了我的代码。的的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次，下次我点击它时，它会执行更多次，所以我不能逐一显示，我不知道如何解决它。我已经尝试了很多东西。

Answer 1

也许每次点击脚本都会再次创建相同的处理程序......

尝试将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);
        });
    });
});

点击jQuery，执行太多次

1 个答案: