Question

我正在尝试使用Jquery删除函数，这是我编写的代码 -

$("a.delete").click(function(){         
        var target = $(this).attr("id");            
        var c = confirm('Do you really want to delete this category?');
        if(c==true) {
    $(target+"ul").delay(3000).fadeOut(200);
  }
  else {
    return false;
  }
    });

现在好了问题，当我按下时，按下一个类删除，它正确，显示对话框（并且id是正确的），但是在我按下之后，它会用php删除它，没有jquery fadeOut效果。我的PHP代码 -

  public function deleteCategory() {
    if(isset($_GET['action']) && $_GET['action'] == 'delete') {
      $id = (int)$_GET['id'];
      $sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
      mysql_query($sql);
    }
  }

不确定问题出在哪里，但我认为它在$（目标+“ul”）内，因为我不确定，是否会将目标值和ul一起添加。

另外，如果我按否，我怎么能阻止删除？目前，如果我按否，它仍将删除该类别。

如果您需要任何其他信息，请询问。

完整代码 -

  public function showCategories() {
    if(isset($_SESSION['logged_in']) && isset($_SESSION['user_level']) && $_SESSION['user_level'] == 'admin') {
      $sql = "SELECT * FROM `categories`";
      $q = mysql_query($sql);
      if(mysql_num_rows($q) > 0) {
        ?>
          <div class="recentorders" style="display: none;" id="categoryBox">
            <h5 class="colr">Categories</h5>
              <div class="account_table" style="width: 688px;">
                  <ul class="headtable" style="width: 680px;">
                      <li class="order">ID</li>
                      <li class="action" style="width: 430px;">Category Name</li>
                      <li class="action nobordr">Options</li>
                  </ul>
        <?php
        while($row = mysql_fetch_array($q)) {
          ?>
            <ul class="contable" style="width: 680px;" id="cat<?php echo $row['id']; ?>ul">
                <li class="order"><?php echo $row['id']; ?></li>
                <li class="action" style="width: 430px;"><?php echo $row['name']; ?></li>
                <li class="action nobordr"><a href="?action=edit&id=<?php echo $row['id']; ?>#" class="first">Edit</a><a class="delete" id="cat<?php echo $row['id']; ?>" href="?action=delete&id=<?php echo $row['id']; ?>#">Delete</a></li>
            </ul>          
          <?php 
        }
        ?>
              </div>
          </div>
        <?php
      }
      else {
        // No categories created, please create one first.
      }
    }
    else {
      header('location: account.php');
    }
  }

  public function deleteCategory() {
    if(isset($_GET['action']) && $_GET['action'] == 'delete') {
      $id = (int)$_GET['id'];
      $sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
      mysql_query($sql);
    }
  }

Answer 1

这是因为您正在使用一个锚标记，该标记导致回发到服务器，这会在您看到动画之前刷新页面。确保您的锚标记的href定义为“＃”以阻止回发发生。

Answer 2

你应该使用除A标签之外的其他东西，例如跨度或div。然后在单击此元素后进行淡出，然后重定向到删除对象的PHP脚本：

$("SPAN,DIV.delete").click(function(){         
    var target = $(this).attr("id");            
    var c = confirm('Do you really want to delete this category?');
    if(c==true) {
        $(target+"ul").delay(3000).fadeOut(200);
        window.location.href = URL TO PHP FILE
    }
    else {
        return false;
    }
 });

Answer 3

如果您按ID搜索，则需要在选择器前加上“＃”：

jsFiddle上的100％工作样本：

http://jsfiddle.net/E7QfY/

更改

 $(target+"ul").delay(3000).fadeOut(200);

到

 $('#' + target+"ul").delay(3000).fadeOut(200);

OR

 $(this).closest('ul').delay(3000).fadeOut(200);

我还要将代码修改为：

 $("a.delete").click(function(event){           
      if(confirm('Do you really want to delete this category?') == true){               
           $(this).closest('ul').delay(3000).fadeOut(200);
           window.location.href = $(this).attr('href'); //OR use AJAX and do an event.preventDefault();
      }
      else
           event.preventDefault();
 });

Jquery删除功能

3 个答案: