2015-06-18 25 views
0

我已经从mysql数据库中检索记录并使用循环将其显示在我的页面中。在页面上显示的每个记录(我有4个)中,除了别的以外,还有一个按钮和一个span类型的元素,分别是“减少”和“数量”。当我点击减少按钮时,它使用ajax将数据库中的“数量”减少1,然后将我希望显示在“数量”span元素中的新值作为文本返回。现在,除了一个区域之外,我已经能够完成所有这些工作。返回新数量后,它将更改显示的所有记录的“数量”值,而不是与单击的按钮位于同一容器中的“数量”值。任何人都可以告诉我我的编码出错了。将jquery变量插入到ajax目标网址

下面的代码的摘录显示的数据:

if(mysqli_num_rows($run) >= 1){ 
        while($row = mysqli_fetch_assoc($run)) { 
         $name = $row['name']; 
         $quantity = $row['quantity']; 
         $price = $row['price']; 
         $image = $row['image']; 
         $category = $row['category']; 
         $total = $price * $quantity; 
         echo "<div class=\"post-container\">\n"; 
         echo "<div class=\"post-thumb\">\n"; 
         echo "<img src='$image'>\n"; 
         echo "</div>\n"; 
         echo "<div class=\"post-title\">\n"; 
         echo "<h4 style=\"font-weight:bold;\">\n"; 
         echo "<a href=\"view.php?name=$name&category=$category\" class=\"links\" target=\"_blank\">$name</a>\n"; 
         echo "<span id=\"deletion\">Delete</span>\n"; 
         echo "</h4>\n"; 
         echo "</div>\n"; 
         echo "<div class=\"post-content\">\n"; 
         echo "<ul style=\"list-style-type:none;\">\n"; 
         echo "<li>Cost Per Item: <span id=\"cost\">$price</span>/=</li>\n"; 
         echo "<li>\n"; 
         echo "Quantity: \n"; 
         echo "<button type=\"submit\" class=\"glyphicon glyphicon-minus decrease\" title=\"Decrease Quantity\"></button>\n"; 
         echo "\n"; 
         echo "<span id=\"cost\" class=\"quantity\">&nbsp$quantity&nbsp</span>\n"; 
         echo "\n"; 
         echo "<button type=\"submit\" class=\"glyphicon glyphicon-plus increase\" title=\"Increase Quantity\"></button>\n"; 
         echo "</li>\n"; 
         echo "<li>Total Cost: <span id=\"cost\">$total</span>/=</li>\n"; 
         echo "</ul>\n"; 
         echo "</div>\n"; 
         echo "</div>"; 
        } 
       } 

而这里的的jQuery的摘录:

$(".decrease").click(function(){ 
     var itemName = $(this).parent("li").parent("ul").parent("div.post-content").siblings("div.post-title").find("a").text(); 
     $.post(
      "decrease-cart.php?username=<?php echo $username?>", 
      {name: itemName}, 
      function(result){ 
       $(this).siblings(".quantity").text(result); 
      } 
     ); 
    }); 

回答

0

我看到你尝试使用$(这)内一个Ajax回调

$.post(
    "decrease-cart.php?username=<?php echo $username?>", 
    {name: itemName}, 
    function(result){ 
     $(this).siblings(".quantity").text(result); 
    } 
); 

我不件事你应该使用$(这)有直接

做这样的,你选择的节点存储在一个临时变量

$(".decrease").click(function(){ 
    var __temp = $(this); 
    var itemName = __temp.parent("li").parent("ul").parent("div.post-content").siblings("div.post-title").find("a").text(); 
    $.post(
     "decrease-cart.php?username=<?php echo $username?>", 
     {name: itemName}, 
     function(result){ 
      __temp.siblings(".quantity").text(result); 
     } 
    ); 
});