Question

我有一个脚本，允许我的电子商务网站上的用户选择3种产品，并在他们选择时突出显示产品。

如何获取所选的3种产品的$ pro_image，标题，desc等，并将其放入表格中以进行并排查看？

我假设我们将以某种方式需要检查选择来分别标识每个产品的$ pro_id？

<?php include("includes/header.php"); ?>

<body>
  <div id="content">
    <div class="container">
      <div class="row">
        <div class="col-md-12">

          <?php
          if(!isset($_GET['p_cat'])){
            if(!isset($_GET['cat'])){

            }
          }
          ?>

        </div>
      </div>

      <div class="col-md-3"><!-- col-md-3 Begin -->
        <?php include("includes/sidebar.php"); ?>

        <div class="col-md-7">
          <h4>Not sure which product to choose? <br> Select up to 3 and compare side-by-side.</h4>
        </div>

        <div class="col-md-2">
          <button type="compare" class="btn btn-success" name="submit-compare">Compare</button>
        </div>

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

          <?php

          $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' style='margin-top: 5%;'>
                  </center>
                <div class='text'>
                  <center>
                    <a href='$pro_link' style='color: black;'> $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><!-- col-md-12 Finish -->
      </div><!-- row Finish -->
    </div><!-- col-md-12 Finish -->
  </div><!-- row Finish -->

  <?php include("includes/footer.php"); ?>

  <script src="js/jquery-331.min.js"></script>
  <script src="js/bootstrap-337.min.js"></script>

</body>
</html>

Answer 1

首先，没有名为“比较”的按钮类型，请遵循标准，您不应在这些属性中放入随机的内容，可以根据需要创建自己的属性（我认为不需要这样做）。请参见此处以了解三种允许的类型：https://www.w3schools.com/tags/att_button_type.asp（您应该只使用“按钮”）

第二，不要通过JS添加样式，每次更改像素都会导致整个重画。取而代之的是，在元素的class属性上切换类名称，让CSS进行样式工作，而JS进行交互工作。

第三，将所有“ PHP”移至脚本顶部（例如定义SQL语句并获取其结果），而不是将这些内容散布在HTML中（只需稍后在文档中使用PHP从以下位置构建HTML）（例如脚本顶部的PHP变量），例如循环遍历结果集以构建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

如何编写并排列出表中产品的函数

1 个答案: