使用jQuery和AJAX显示/隐藏div无法正常工作 [英] Show/hide div with jQuery and AJAX not working properly

问题描述

我正在尝试根据SQL查询的结果显示特定的div。

I'm trying to show a specific div depending on the result of a SQL query.

我的问题是我无法获取div异步切换。
现在需要刷新页面才能让div更新。

My issue is that I can't get the divs to switch asynchronously. Right now the page needs to be refreshed for the div to get updated.

  <?php
  //SQL query

   if (foo) {
   ?>

   <div id="add<?php echo $uid ?>">
      <h2><a href="#" class="plus" ?>">Add to list!</a></h2>   
   </div>

   <?php
       } else { 
   ?>
  <div id="remove<?php echo $uid ?>">
     <h2><a href="#" class="minus" ?>">Delete!</a></h2>
  </div>

  <?php     
              }
  <?          


 <script type="text/javascript">
 //add to list

 $(function() {
 $(".plus").click(function(){
 var element = $(this);
 var I = element.attr("id");
 var info = 'id=' + I;
 $.ajax({
 type: "POST",
 url: "ajax_add.php",
 data: info,
 success: function(data){
 $('#add'+I).hide();
 $('#remove'+I).show();
 }
 });
 return false;
 });

 });
 </script>


 <script type="text/javascript">
 //remove 
 $(function() {
 $(".minus").click(function(){
 var element = $(this);
 var I = element.attr("id");
 var info = 'id=' + I;
 $.ajax({
 type: "POST",
 url: "ajax_remove.php",
 data: info,
 success: function(data){
 $('#remove'+I).hide();
 $('#add'+I).show();
 }
 });

 return false;

 });

 });
 </script>

ajax_add.php 和 ajax_remove.php 只包含一些SQL查询。

ajax_add.php and ajax_remove.php only contain some SQL queries.

div #follow和#remove缺少什么来切换而不必刷新页面？

What is missing for the div #follow and #remove to switch without having to refresh the page?

推荐答案

我试图显示一个特定的div取决于SQL查询的结果

您的代码似乎对SQL查询的结果没有任何作用。您在Ajax成功回调中隐藏或显示的div仅取决于单击的链接，而不取决于查询结果。

Your code doesn't seem to do anything with the results of the SQL query. Which div you hide or show in your Ajax success callbacks depends only on which link was clicked, not on the results of the query.

无论如何，您的点击处理程序正在尝试从没有的元素中检索 id 属性。你有：

Anyway, your click handler is trying to retrieve the id attribute from an element that doesn't have one. You have:

$(".plus").click(function(){
  var element = $(this);
  var I = element.attr("id");

.. .where .plus 是没有 id 的锚元素。它是包含div的锚点，其中定义了 id 。您可以使用 element.closest（div）。attr（id）从div中获取 id ，但我认为您打算在其上定义 id 锚，因为你的html目前有一个不完整的PHP位：

...where .plus is the anchor element which doesn't have an id. It is the anchor's containing div that has an id defined. You could use element.closest("div").attr("id") to get the id from the div, but I think you intended to define an id on the anchor, because you currently have an incomplete bit of PHP in your html:

<a href="#" class="plus" ?>">
                         ^-- was this supposed to be the id?

试试这个：

<a href="#" class="plus" data-id="<?php echo $uid ?>">

然后：

 var I = element.attr("data-id");

另请注意y您不需要两个单独的脚本元素和两个文档就绪处理程序，您可以在同一文档中绑定两个单击处理程序。在您的情况下，因为您的两个单击函数几乎完全相同，您可以将它们组合成一个处理程序：

Note also that you don't need two separate script elements and two document ready handlers, you can bind both click handlers from within the same document ready. And in your case since your two click functions do almost the same thing you can combine them into a single handler:

  <script type="text/javascript">
  $(function() {
    $(".plus,.minus").click(function(){
      var element = $(this);
      var I = element.attr("data-id");
      var isPlus = element.hasClass("plus");
      $.ajax({
        type: "POST",
        url: isPlus ? "ajax_add.php" : "ajax_remove.php",
        data: 'id=' + I,
        success: function(data){
          $('#add'+I).toggle(!isPlus);
          $('#remove'+I).toggle(isPlus);
        }
      });
      return false;
    });    
  });
  </script>

这篇关于使用jQuery和AJAX显示/隐藏div无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！