Question

这是我的代码，尝试在用户搜索时查找产品。

 if ($Results.find("product").length > 0)
 {
   var $theProduct = null;
   var $id = vars['searchTerm'];

   //Search for each product        
   $Results.find("product").each(function() {

     if ($Results.find('id').text() === $id)
     {
       $theResult = $(this);    
     }
   });

从这一点开始，我的搜索结果显示在表格中

   // Get the product data into the variables from the matched product
   var id = $theResult.find("id").text();
   var top = $theResult.attr("top-level-category");
   var sub = $theResult.attr("sub-level-category");
   var title = $theResult.find("title").text();
   var brand = $theResult.find("brand").text();
   var price = $theResult.find("price").text();

    //Results goes to table                         
   $('#search_table').append("<tr><td>" + 
     id + "</td><td>" + 
     top + "</td><td>" +
     sub + "</td><td>" + 
     title + "</td><td>" +
     brand + "</td><td>&pound" + 
     price + "</td></tr>");                     
   });
 }

未找到搜索结果时

else{
  // We don't have any results
  $("#mainBody").find("table").hide();
  $("#mainBody").append("<h3>There are no search results. </h3>"); 
}

我现在遇到的问题是，当用户尝试在我的页面中找到多个产品时，我的代码会中断，我不知道为什么。

我的HTML：

<div id="mainBody">
            <table id="search_table">
                <thead>
                    <tr>
                        <th>Product Code</th>   
                        <th>Product Category</th>  
                        <th>Product Type</th>  
                        <th>Title</th>
                        <th>Brand</th>
                        <th>Price</th>
                    <tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

Answer 1

啊，继上面的评论之后......现在我已经将您的代码格式化为可读，并且通过适当的缩进，问题变得更加明显。您在结果中的产品上运行.each()循环，但您在循环中所做的只是为$theResult分配值。然后你什么都不做。下次循环运行时，该值将被覆盖。

然后在循环结束后，您开始尝试使用$ theResult将结果附加到表中。但是因为你把这个代码放在循环之外，它只运行一次，并且只会使用$ theResult的最后一个值 - 上次执行循环时分配的值。

只要$ Results中只有一个项目，这不会成为问题，但只要有多个项目就会出现问题。修复非常简单，就是在循环中移动与$theResult交互的所有代码，因此它将执行与匹配产品一样多的次数：

$Results.find("product").each(function() {

 if ($Results.find('id').text() === $id)
 {
   $theResult = $(this);    

   // Get the product data into the variables from the matched product
   var id = $theResult.find("id").text();
   var top = $theResult.attr("top-level-category");
   var sub = $theResult.attr("sub-level-category");
   var title = $theResult.find("title").text();
   var brand = $theResult.find("brand").text();
   var price = $theResult.find("price").text();

   //Results goes to table                         
   $('#search_table').append("<tr><td>" + 
     id + "</td><td>" + 
     top + "</td><td>" +
     sub + "</td><td>" + 
     title + "</td><td>" +
     brand + "</td><td>&pound" + 
     price + "</td></tr>");                     
   });
 }
});

当用户搜索多个产品时，如何在表格中分隔每个结果页面？

1 个答案: