Question

我在这里有2个div products_list和new_products，其中列出了一组运行不同查询的产品。

我有一个按钮Link1。在这里，当我点击Link1按钮时，我试图用products_list div替换现有的new_products。请帮助我如何使用replacewith（）来使用ajax实现这一点。

Products_list div

<?php
//List products from database
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code, product_image, product_price FROM products_list");
//Display fetched records as you please

$products_list =  '<div><ul class="products-wrp">';

while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
}
$products_list .= '</ul></div>';
echo $products_list;

New_products div

<?php
//List products from database
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code, product_image, product_price FROM new_list");
//Display fetched records as you please

$new_products =  '<div><ul class="products-wrp">';

while($row = $results->fetch_assoc()) {
$new_products .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
}
$new_products .= '</ul></div>';
echo $new_products;

按钮

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
</div>

Answer 1

将一个div的内容复制到另一个div：

$(document).on("click", ".w3-button", function() {
  $("#products_list").html() = $("#new_products").html();
  // If you want to clear new_products
  $("#new_products").empty();
});

为此，请将ID products_list分配给第一个div，将new_products分配给第二个div。 <div id="products_list">和<div id="new_products">

在按钮单击时使用replacewith（）div和new div

1 个答案: