显示我的用户数量并将其显示在徽章上。（代码点火器）

Question

这里是新手。我做了一个 ajax 来计算用户数量并将其显示在我的徽章上，但是，每当我单击 1 个按钮（带有 table 的模式）时，它都会显示在所有徽章上。例如。我的第一行模式 table 中有 4 个用户。 #4 计数显示在我所有的徽章上。这很奇怪。我的目标是动态显示徽章中的计数。为了更好地解释，我在下面提供了视频和图片。

https://streamable.com/z6dqgi << 这是我所做的输出。（查看徽章计数行为）

这就是我 aim/target 的目的。

查看：

<div class="tab-content" id="custom-tabs-two-tabContent">
              
              <div class="tab-pane fade show active" id="custom-tabs-two-all" role="tabpanel" aria-labelledby="custom-tabs-two-all-tab">
                     <table class="table">
                            <thead class="">
                                <tr>
                                <th scope="col"><i class="fas fa-hashtag"></i></th>
                                <th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
                                <th scope="col">Full Name</th>
                                 <th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
                                <th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
                                <th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
                                <th scope="col">Level</th>
                                <th scope="col">balance</th>
                                <th scope="col">&emsp;&emsp;&nbsp;Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                
                               <?php 
                               foreach($result as $rows) {   $uuid = $rows->uuid;
                               $userID = $rows->userID; ?>     
                                   <?php if($rows->uuid===$_SESSION['uid']): ?>     
                                <tr>
                                <th><?php echo $rows->userID;  ?></th>
                                <td><?php echo $rows->uuid; ?></td>
                                <td><?php echo $rows->firstname; ?>&nbsp;<?php echo $rows->lastname; ?></td>
                                <td><?php echo $rows->email; ?></td>
                                <td><?php echo $rows->mobile; ?></td>
                                <td><?php echo $rows->username; ?></td>
                                <td><?php echo $rows->account_type; ?></td>
                                <td><?php echo $rows->currentPoints; ?></td>
                                <td>
                                   
                                        <button data-id="<?php echo $rows->userID; ?>" class=" fundTable btn btn-success btn-sm text-bold " type="button"  data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-1"></i> <?php echo $rows->userID; ?>FUND
                                        </button>
                                        
                                        
                                        <button data-id="<?php echo $rows->userID; ?>" class=" allTable btn btn-danger btn-sm text-bold" type="button"  data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="<?php echo $rows->userID; ?>" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>   
                                 
                                        
                                        
                                
                                        
                               </td>
                               </tr>
                                     <?php else: ?>
                                                  
                                            <?php endif;?>
                                     <?php } ?>
                            </tbody>
                     </table>
   </div>

<span class="badge badge-warning navbar-badge">2</span>  //this is where the total value should be displayed.                                           
</button>

型号：

public function view($userID = 0){
            $this->db->select("*");
            $this->db->from("users");
            $this->db->where( "uuid=".$userID);
            $query = $this->db->get();
            return $result = $query->result();
            
        }

控制器：

public function view()
    {
        
        if ($this->input->is_ajax_request()) {
            $view_id = $this->input->post('view_id');
            
            if ($post = $this->networks->view($view_id)) {
                $data = array('responce' => 'success', 'post' => $post);
              
            } else {
                $data = array('responce' => 'error', 'message' => 'failed to fetch record');
            }
            echo json_encode($data);
        } else {
            echo "No direct script access allowed";
          
        }
        
    }

脚本：

<script>


          $(document).ready(function(){
    $(".allTable").on("click", function(){
        var view_id = $(this).data('id')
    
        $.ajax({
         
           url: "<?=site_url('network/view')?>",

          type: "post",
          dataType: "json",
          data: {
            view_id: view_id  
          },
            success: function(data){
              
              var tbody ="";
              var item =data.post; 


            for(var key in item) {
                    tbody +="<tr>";
                    tbody += "<td>"+item[key].userID+"</td>";
                    tbody += "<td>"+item[key].uuid+"</td>";
                    tbody += "<td>"+item[key].firstname+" "+item[key].lastname+"</td>";
                    tbody += "<td>"+item[key].email+"</td>";
                    tbody += "<td>"+item[key].mobile+"</td>";
                    tbody += "<td>"+item[key].username+"</td>";
                    tbody +="</tr>"
                                 }
           $(".navbar-badge").text(Object.keys(item).length); 
          $(".tbody").html(tbody);
          $('#editModal').modal('show');
            }
     
        });
        })
        });
 
</script>

Answer 1

正如您使用的那样 .navbar-badge 这将针对所有具有 class 的元素，这就是它更改所有 span 标签的原因。相反，因为您已经获得了 data-id 按钮，您可以使用它来使用 $("span[data-id=" + view_id + "]").text("sometext") 仅针对所需的跨度。

演示代码 :

$(document).ready(function() {
  $(".allTable").on("click", function() {
    var view_id = $(this).data('id')

    /*$.ajax({
//somecodes of ajx ..
      */
    // $("span[data-id="+view_id+"]").text(Object.keys(item).length);
    $("span[data-id=" + view_id + "]").text(10);
    // other codes ..
    /*  }
    });*/
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<table class="table">
  <thead class="">
    <tr>
      <th scope="col"><i class="fas fa-hashtag"></i></th>
      <th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
      <th scope="col">Full Name</th>
      <th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
      <th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
      <th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
      <th scope="col">Level</th>
      <th scope="col">balance</th>
      <th scope="col">&emsp;&emsp;&nbsp;Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        1
      </th>
      <td>
        123
      </td>
      <td>
        abc
      </td>
      <td>
        a@gmail.com
      </td>
      <td>
        12213
      </td>

      <td>

        <button data-id="1" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-1"></i> FUND
                                        </button>


        <button data-id="1" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="1" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>

      </td>
    </tr>
    <tr>
      <th>
        2
      </th>
      <td>
        1232
      </td>
      <td>
        abc2
      </td>
      <td>
        a2@gmail.com
      </td>
      <td>
        12213
      </td>

      <td>

        <button data-id="2" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-2"></i> FUND
                                        </button>


        <button data-id="2" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="2" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>

      </td>
    </tr>

  </tbody>
</table>

显示我的用户数量并将其显示在徽章上。（代码点火器）

Showing the count of my user and display it on badge. (Codeigniter)

html

ajax

jquery

codeigniter

codeigniter-query-builder

显示我的用户数量并将其显示在徽章上。 （代码点火器）

Showing the count of my user and display it on badge. (Codeigniter)

html

ajax

jquery

codeigniter

codeigniter-query-builder

显示我的用户数量并将其显示在徽章上。（代码点火器）