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

Posted

技术标签:

【中文标题】显示我的用户数量并将其显示在徽章上。 (代码点火器)【英文标题】:Showing the count of my user and display it on badge. (Codeigniter) 【发布时间】:2021-04-03 07:47:55 【问题描述】:

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

https://streamable.com/z6dqgi

这就是我的目标/目标。

查看:

<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>

【问题讨论】:

您好,可以展示一下您的 html 表格吗? 您好,添加完毕。 【参考方案1】:

当您使用.navbar-badge 时,这将针对具有该类的所有元素,这就是它更改所有跨度标签的原因。相反,由于您已经获得了按钮的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>

【讨论】:

这是有效的。但是,我的目标是在访问页面时。徽章中的计数是自动可见的。只有点击表格后才能看到您的解决方案。谢谢。 您好,您当前提供的代码在 click event 之后显示该部分。在访问的页面上显示它们的代码在哪里?你也没有在你提出的问题中提到这一点。 是的。那是我的错。然而。我仍然会检查这个作为答案。并就我的主要目标发表另一篇文章。你的解决方案真的很有帮助。谢谢。

以上是关于显示我的用户数量并将其显示在徽章上。 (代码点火器)的主要内容,如果未能解决你的问题,请参考以下文章

沿应用图标显示通知红色徽章

如何在后台的android应用程序图标上计算推送通知消息徽章

Google Play 商店中未显示排行榜和成就徽章

如何将徽章添加到系统生成的“更多”UITabBarItem

如何增加徽章数量

Rails 4 - 我如何自动检测用户的位置并将其显示在 Web 应用程序上?