php - jQuery/AJAX : each, if、post、.html:运行但随机删除数据

Question

我有一个 PHP 页面，其中 MySQL 数据库中的 FedEx 和 UPS 跟踪号码与“trackingnumber”类的 DIV 的 ID 相呼应。我的 JS 每个都通过这些 div 并获取 ID，然后发布到 PHP 页面，该页面轮询 Fedex/UPS 并回显它们的结果。除了一件事之外，这非常有效。加载数据后它会随机删除数据。因此数据会在屏幕上闪烁一秒钟，然后消失。它也是随机的，这让我感到困惑。看看这个Video demonstrating the issue (.mov)以获得更好的理解。

JS:

$(document).ready(function(){
    //Dislay some text indicating that we're getting status
    if ($("[id!='']")) {
        $("div.trackingnumber").html("working...");
    };
    //Begin getting status
    $('div.trackingnumber').each(function(index){
        var v2 = $(this).attr("id");
        //If it's FedEx, post to the FedEx script.
        if ($("[id!='1z'], [id!='1Z']")) {
            $.post("inc/fedex.php", { v: v2 }, function(data){
                $("#" + v2).html(data);
            });
        };
        //If it's UPS, post to the ups script.
        if ($("[id^='1z'], [id^='1Z']")) {
            $.post("inc/ups.php", { v: v2 }, function(data){
                $("#" + v2).html(data);
            });
        };
    });
});

相关HTML(PHP解析后):

<td scope='col' width='100px'>
        <div class='trackingnumber' id='1ZX799380311650886'></div>
</td>

有什么想法吗？我是 jQuery(以及一般的 JS)新手...我不知道为什么会这样做。看起来我的所有代码都是有效的(FireBug 或 Safari 的 Web 检查器中唯一的错误是当它遇到类中没有任何数据的 div 时)...我已经为此奋斗了大约一天，终于解决了这一点...真的希望有人能够帮助我!

Answer 1

恐怕您误解了 jQuery 的工作原理；您的 if 语句根本没有意义。

$("[id!='']") 将始终返回一个 jQuery 对象，由于 JavaScript 的自动类型强制，该对象将始终 计算结果为 true。换句话说，$("[id!='']") == true 无论您的 HTML 是什么样子。这同样适用于其余的 if 语句。

由于此错误，您的代码每次都会检索 UPS 和 FedEx 脚本的结果。由于 AJAX 调用是异步的，您的结果可能会以不同的顺序出现，从而导致数据明显随机清除(当空数据在正确数据之后返回时)。

这就是我假设您希望代码的行为方式:

$(document).ready(function(){
  // Select all of the tracking numbers on the page
  $(".trackingnumber").
    // Display some text in each, indicating that we're getting status
    text("working...").
    // Begin getting status for each tracking number.
    each(function () {
      var trackingNumber = this.id;

      // Use the fedex script by default ...
      var script = "fedex";

      if (trackingNumber.match(/^1z/i)) {
        // ... unless it's a UPS tracking number.
        script = "ups";
      }

      $.post("inc/" + script + ".php", { v: trackingNumber }, function(data){
          $("#" + trackingNumber).html(data);
      });
    });
});

工作演示: http://jsbin.com/iyeci (可通过 http://jsbin.com/iyeci/edit 编辑)

如果您需要更多帮助来理解代码，请随时询问。