切换类在jquery中无法正常工作

时间:2014-08-15 10:09:51

标签: jquery ajax click toggle

   <table class="table table-striped table-bordered table-hover" id="sample_2">
    <thead>
        <tr style="background:#52abe0; color:#fff;"> 
            <th>First Name</th>
            <th>LastName</th>
            <th>CIN </th>
            <th>Sexe</th>                             
            <th>Category</th>                              
            <th>City</th>                
            <th>Action</th>
         </tr>
    </thead>
    <tbody>
    <?php while($resulat = $sql_adherent->fetch_object()): ?>
         <tr class="odd gradeX">        
            <td><?php echo $resulat->fname_adherent;?></td>
            <td><?php echo $resulat->lname_adherent;?></td>
            <td><?php echo $resulat->cin;?></td>
            <td><?php echo $resulat->sexe;?></td>
            <td><?php echo $resulat->category;?></td>                              
            <td><?php echo $resulat->city;?></td>
            <td>
                <?php
                     $sql_licence = $mysqli->query("SELECT id_adherent FROM licences_clubs WHERE id_adherent='".$resulat->id_adherent."'"); 
                ?>

                <?php if($sql_licence->num_rows == 0){ ?>
                     <a href="#" rel='<?php echo $resulat->id_adherent; ?>' fed="<?php echo $resulat->id_federation; ?>" ligue="<?php echo $resulat->id_ligue; ?>" club="<?php echo $resulat->id_club; ?>" nom='<?php echo $resulat->fname_adherent; ?>' prenom='<?php echo $resulat->lname_adherent; ?>' id="validate" class="btn default btn-xs red-stripe">Validate</a>

               <?php }else{ ?>

                     <a href="#" rel='<?php echo $resulat->id_adherent; ?>' fed="<?php echo $resulat->id_federation; ?>" ligue="<?php echo $resulat->id_ligue; ?>" club="<?php echo $resulat->id_club; ?>" nom='<?php echo $resulat->fname_adherent; ?>' prenom='<?php echo $resulat->lname_adherent; ?>' id='validate' class="btn default btn-xs green-stripe"><i class="icon-check"></i></a>

               <?php } ?>

            </td>            
         </tr>
              <?php endwhile; ?>                            
             </tbody>
          </table>

我想切换课程&#34; green-stripe&#34; AND&#34; red-stripe&#34;,取决于数据库表数据,当我点击id =&#34;验证&#34;我正在使用此代码。

以下是代码:

     $(document).ready(function(){
        $("#validate").on('click', function(e){
              e.preventDefault();
              var nom     = $(this).attr('nom'),
              prenom      = $(this).attr('prenom'),
              id_adherent = $(this).attr('rel'),    
              id_club     = $(this).attr('club'), 
              id_ligue    = $(this).attr('ligue'), 
              id_fed      = $(this).attr('fed'), 

  if($(this).hasClass('red-stripe')){
        $(this).removeClass('red-stripe');
        $(this).addClass('green-stripe');        
        $(this).html('<i class="icon-check">');

        $.ajax({ 
               url: 'ajax/demande_couverture.php', 
               data: 'id_adherent=' + id_adherent  + '&id_fed=' + id_fed + '&id_ligue=' + id_ligue + '&id_club=' + id_club + '&nom=' + nom + '&prenom=' + prenom,   

               beforeSend: function(){
                   $("#loading").show();
               },
               complete: function(){
                   $("#loading").hide();
               },
               success: function(data){
                  $("#feedback").html(data);
               }     
         });

  }else{
        var nom         = $(this).attr('nom');
        var prenom      = $(this).attr('prenom');
        var id_adherent = $(this).attr('rel'); 
        var id_club     = $(this).attr('club');   

        $(this).removeClass('green-stripe');
        $(this).addClass('red-stripe');        
        $(this).html('Valider');

        $.ajax({                    
               url: 'ajax/annuler_demande_couverture.php', 
               data: 'id_adherent=' + id_adherent + '&id_club=' + id_club + '&nom=' + nom + '&prenom=' + prenom, 

               beforeSend: function(){
                   $("#loading").show();
               },
               complete: function(){
                   $("#loading").hide();
               },
               success: function(data){                     
                   $("#feedback").html(data);                      
               }     
     });
    }           
  });
});

Ajax文件#:demande_couverture.php

<?php
    require_once '../includes/config.php';
    $nom          = $_GET['nom'];
    $prenom       = $_GET['prenom'];

    $id_adherent  = intval($_GET['id_adherent']);
    $id_fed       = intval($_GET['id_fed']);
    $id_ligue     = intval($_GET['id_ligue']);
    $id_club      = intval($_GET['id_club']);

    //--------------------------------------------------
    // GET THE CODE-LICENCE FROM `federations` TABLE     //
    //--------------------------------------------------

    $sql = $mysqli->query("SELECT code_licence FROM federations WHERE id_federation=$id_fed");
    $code_licence = $sql->fetch_object();

    $code_licences = explode("-", $code_licence->code_licence);
    $code_licencess = $code_licences[0] ."-". ($code_licences[1]+1);

    $num_licence  = $code_licence->code_licence;
    $num_recu     = substr(number_format(time() * rand(),0,'',''),0,15);
    $validation   = "pending";

    //-------------------------------------------------------------
    // INSERT NEW VALIDATED MEMBER INTO `licences_clubs` table  //
    //------------------------------------------------------------

            $query = $mysqli->query("INSERT INTO `licences_clubs` (id_federation, id_ligue, id_club, id_adherent, num_licence, num_recu, validation) VALUES('$id_fed','$id_ligue','$id_club', '$id_adherent', '$num_licence', '$num_recu', '$validation')") or die($mysqli->error);

    if($query === TRUE){
         echo "     
        <div class='note note-success'>
            <h4 class='block'>Succès !</h4>
            <p>L'athlète <strong style='color:red'>". $nom  ." ". $prenom  ."</strong> was added  to the list of request for coverage.</p>
        </div>
      ";
    }else{
         echo "      
          <div class='note note-danger'>
            <h4 class='block'>Votre attention SVP !!</h4>
             <p> An error occurred while requesting coverage ..</p>
          </div>
      ";
    }

    ?>

代码根本不起作用,无法找到错误隐藏的位置......

我的问题是:如何切换课程&#34;绿色条纹&#34; AND&#34; red-stripe&#34; ...在其他单词id中,按钮具有Class&#34; green-stripe&#34;我希望它改为&#34; red-stripe&#34;点击它时。该类根据成员信息而变化。

1 个答案:

答案 0 :(得分:1)

第一条规则:您的网页中不应包含多个具有相同id的元素。

您的php会生成多个#validate元素。

$("#validate").on('click', function(e){仅在第一个按钮上绑定该功能。

Here is a demonstration of this problem

<强>解决方案

在你的php中,将id="validate" class="btn default btn-xs red-stripe"替换为class="validateButton btn default btn-xs red-stripe"(等效于绿色条纹)

在您的javascript中,将$("#validate")替换为$('.validateButton')