如何編寫並排列出表中產品的函數

Question

我有一個腳本，可以讓我的電子商務網站上的用戶選擇3種產品，並在他們選擇的產品上突出顯示這些產品。

如何獲取所選的3種產品的$ pro_image，標題，desc等，並將其放入表格中以進行並排查看？

我假設我們將以某種方式需要檢查選擇來分別標識每個產品的$ pro_id？

      <div class="col-md-10">
        <h4>Not sure which product to choose? <br> Select up to 3 and compare side-by-side.</h4>
        <div class="col-md-2">
          <button type="compare" class="btn btn-success" name="submit-compare">Compare</button>
        </div>

        <div class="col-md-12">
          <?php getpcatpro();

          $get_products = "SELECT * FROM products ORDER BY RAND() LIMIT 0,9";
          $run_products = mysqli_query($con,$get_products);

          while($row_products=mysqli_fetch_array($run_products)){

            $pro_id = $row_products['product_id'];
            $pro_title = $row_products['product_title'];
            $pro_img1 = $row_products['product_img1'];
            $pro_link = $row_products['product_link'];

            echo "
            <div class='col-md-4 col-sm-6'>
              <div class='product' onclick='highlight(this)'>
                <center>
                  <img class='img-responsive' src='admin_area/product_images/$pro_img1'>
                </center>
                <div class='text'>
                  <center>
                    <a href='$pro_link'> $pro_title </a>
                  </center>
                </div>
              </div>
            </div>  ";
          }
          ?>

          <script>
            var selected_items = 0;
            function highlight(target) {
              if(target.style.border == ""){
                if(selected_items < 3){
                  target.style.border = "1px solid red";
                  selected_items += 1;
                }
              } else{
                target.style.border = "";
                selected_items -= 1;
              }
            }
          </script>

    </div>
  </div>

Answer 1

首先，沒有稱為“比較”的按鈕類型，請遵循標准，您不應該在這些屬性中放入隨機的內容，可以根據需要創建自己的屬性（我認為不需要這樣做）。 請參閱此處以了解三種允許的類型： https : //www.w3schools.com/tags/att_button_type.asp （您應該只使用“按鈕”）

其次，不要通過JS添加樣式，每次更改像素都會導致整個重畫。 取而代之的是，在元素的class屬性上切換類名稱，讓CSS進行樣式工作，而JS進行交互工作。

第三，將所有“ PHP”移至腳本頂部（例如定義SQL語句並獲取其結果），而不是將這些內容散布在HTML中（只需稍后在文檔中使用PHP從PHP變量構建HTML） （在腳本頂部）），例如循環遍歷結果集以構建HTML，而不執行諸如獲取數據本身之類的重要任務，這將有助於您跟蹤在哪里做什么，因此您不會陷入困境。 IF語句等

確定，創建一個綁定到比較按鈕的函數，該函數可切換元素的狀態。 而不是使用樣式來“突出顯示”，而是在產品父容器上切換“比較”類：

<style>
.product.compare{
    border: 1px solid red;
}
</style>
<script>
$('.btn.compare').click(function(){
    $(this).closest('.product').toggleClass('compare');
});
</script>
<div class='products'>
  <div class='product' data-id='1'>
    <h2>A Product</h2>
    <button class='btn compare'>compare</button>
  </div>
  <div class='product' data-id='2'>
    <h2>Another Product</h2>
    <button class='btn compare'>compare</button>
  </div>
</div>

基本上，這將在單擊按鈕時找到具有類'.product'的父元素，然后在其上切換類'.compare'，因此您應該具有.product.compare

您需要將表設計為具有類名的固定行，如下所示：

<table class='comparison'>
  <thead>
    <tr class='product-title'></tr>
  </thead>
  <tbody>
    <tr class='product-price'></tr>
  </tbody> 
</table>

產品狀態切換后（添加了一個類，該類既可以用CSS突出顯示該行，又可以將其標記為與jQuery進行比較，請創建一個新的按鈕和方法來調用它來建立比較表

<button class='btn goCompare'>Go Compare</button>

$(function(){

  $(".btn.goCompare").on('click', function(e){
    e.preventDefault();
    buildComparisonTable();
  });

});

function buildComparisonTable(){

    var comparisonTableBody = $('table.comparison tbody');
    var comparisonTableBodyProductTitleCol = $('table.comparison thead tr.product-title');
    var comparisonTableBodyProductPriceCol = $('table.comparison tbody tr.product-price');

    comparisonTableBody.find('.product-col').remove();

    $('.product.compare').each(function(){

      var id = $(this).attr('data-id'); 
        var title = $(this).attr('data-title'); 
        var price = $(this).attr('data-price'); 

        comparisonTableBodyProductTitleCol.append('<th class="product-col">'+title+'</th>'); 
        comparisonTableBodyProductPriceCol.append('<td class="product-col">'+price+'</td>'); 

    });
}

選擇是您的選擇，但是請考慮如何聰明，正確地標記頁面以使其腳本易於閱讀。 您可以將所有產品數據填充到父元素的屬性中：

<div class='product' data-id='1' data-title='A Product' data-price='$10.00' data-primary-category='Homeware'>
  <h2>A Product</h2>
  <button class='btn compare'>compare</button>
</div>

或者，您可以向每個具有要閃爍的數據的元素添加一個類：

<div class='product' data-id='1'>
    <h2 class='product-title'>A Product</h2>
    <span class='product-price'>$10.00</span>
    <span class='product-category'>Homeware</span>
    <img class='product-img' src='/images/product-1.jpg' />
</div>

現在，您可以輕松確定目標，並使用適當的類名，合理的布局，正確的技術使用和簡單的方法從中獲取信息。 該代碼筆說明了： https : //codepen.io/anon/pen/voBKgV