javascript 用于比较Laravel 10中产品的前端CSS样式

7gyucuyw  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(138)

我想以水平形式显示产品，如期望外观下所示，但现在它以垂直形式显示，如现有外观下所示。
请看下面的期望外观屏幕截图：

期望外观代码
shop-compare.html

<main class="main">
        <div class="page-header breadcrumb-wrap">
            <div class="container">
                <div class="breadcrumb">
                    <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                    <span></span> Shop <span></span> Compare
                </div>
            </div>
        </div>
        <div class="container mb-80 mt-50">
            <div class="row">
                <div class="col-xl-10 col-lg-12 m-auto">
                    <h1 class="heading-2 mb-10">Products Compare</h1>
                    <h6 class="text-body mb-40">There are <span class="text-brand">3</span> products to compare</h6>
                    <div class="table-responsive">
                        <table class="table text-center table-compare">
                            <tbody>
                                <tr class="pr_image">
                                    <td class="text-muted font-sm fw-600 font-heading mw-200">Preview</td>
                                    <td class="row_img"><img src="assets/imgs/shop/product-2-1.jpg" alt="compare-img" /></td>
                                    <td class="row_img"><img src="assets/imgs/shop/product-1-1.jpg" alt="compare-img" /></td>
                                    <td class="row_img"><img src="assets/imgs/shop/product-3-1.jpg" alt="compare-img" /></td>
                                </tr>
                                <tr class="pr_title">
                                    <td class="text-muted font-sm fw-600 font-heading">Name</td>
                                    <td class="product_name">
                                        <h6><a href="shop-product-full.html" class="text-heading">J.Crew Mercantile Women's Short</a></h6>
                                    </td>
                                    <td class="product_name">
                                        <h6><a href="shop-product-full.html" class="text-heading">Amazon Essentials Women's Tanks</a></h6>
                                    </td>
                                    <td class="product_name">
                                        <h6><a href="shop-product-full.html" class="text-heading">Amazon Brand - Daily Ritual Wom</a></h6>
                                    </td>
                                </tr>
                                <tr class="pr_price">
                                    <td class="text-muted font-sm fw-600 font-heading">Price</td>
                                    <td class="product_price">
                                        <h4 class="price text-brand">$12.00</h4>
                                    </td>
                                    <td class="product_price">
                                        <h4 class="price text-brand">$14.00</h4>
                                    </td>
                                    <td class="product_price">
                                        <h4 class="price text-brand">$15.00</h4>
                                    </td>
                                </tr>
                                <tr class="pr_rating">
                                    <td class="text-muted font-sm fw-600 font-heading">Rating</td>
                                    <td>
                                        <div class="rating_wrap">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width: 90%"></div>
                                            </div>
                                            <span class="rating_num">(121)</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="rating_wrap">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width: 90%"></div>
                                            </div>
                                            <span class="rating_num">(35)</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="rating_wrap">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width: 90%"></div>
                                            </div>
                                            <span class="rating_num">(125)</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="description">
                                    <td class="text-muted font-sm fw-600 font-heading">Description</td>
                                    <td class="row_text font-xs">
                                        <p class="font-sm text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
                                    </td>
                                    <td class="row_text font-xs">
                                        <p class="font-sm text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
                                    </td>
                                    <td class="row_text font-xs">
                                        <p class="font-sm text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
                                    </td>
                                </tr>
                                <tr class="pr_stock">
                                    <td class="text-muted font-sm fw-600 font-heading">Stock status</td>
                                    <td class="row_stock"><span class="stock-status in-stock mb-0">In Stock</span></td>
                                    <td class="row_stock"><span class="stock-status out-stock mb-0">Out of stock</span></td>
                                    <td class="row_stock"><span class="stock-status in-stock mb-0">In Stock</span></td>
                                </tr>
                                <tr class="pr_weight">
                                    <td class="text-muted font-sm fw-600 font-heading">Weight</td>
                                    <td class="row_weight">320 gram</td>
                                    <td class="row_weight">370 gram</td>
                                    <td class="row_weight">380 gram</td>
                                </tr>
                                <tr class="pr_dimensions">
                                    <td class="text-muted font-sm fw-600 font-heading">Dimensions</td>
                                    <td class="row_dimensions">N/A</td>
                                    <td class="row_dimensions">N/A</td>
                                    <td class="row_dimensions">N/A</td>
                                </tr>
                                <tr class="pr_add_to_cart">
                                    <td class="text-muted font-sm fw-600 font-heading">Buy now</td>
                                    <td class="row_btn">
                                        <button class="btn btn-sm"><i class="fi-rs-shopping-bag mr-5"></i>Add to cart</button>
                                    </td>
                                    <td class="row_btn">
                                        <button class="btn btn-sm btn-secondary"><i class="fi-rs-headset mr-5"></i>Contact Us</button>
                                    </td>
                                    <td class="row_btn">
                                        <button class="btn btn-sm"><i class="fi-rs-shopping-bag mr-5"></i>Add to cart</button>
                                    </td>
                                </tr>
                                <tr class="pr_remove text-muted">
                                    <td class="text-muted font-md fw-600"></td>
                                    <td class="row_remove">
                                        <a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
                                    </td>
                                    <td class="row_remove">
                                        <a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
                                    </td>
                                    <td class="row_remove">
                                        <a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>

请参阅下面的现有外观屏幕截图：

现有外观代码
view_compare.blade.php

<div class="page-header breadcrumb-wrap">
            <div class="container">
                <div class="breadcrumb">
                    <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                     <span></span> Compare
                </div>
            </div>
        </div>
        <div class="container mb-80 mt-50">
            <div class="row">
                <div class="col-xl-10 col-lg-12 m-auto">
                    <h1 class="heading-2 mb-10">Products Compare</h1>
                    <h6 class="text-body mb-40">There are products to compare</h6>
                    <div class="table-responsive">
                        <table class="table text-center table-compare">

                            <tbody id="compare">
                                
                               
                            </tbody>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>

master_dashboard.blade.php

<!--  /// Start Load Compare Data -->
<script type="text/javascript">

    function compare(){
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: "/get-compare-product/",

            success:function(response){ 

                $('#compareQty').text(response.compareQty);

                var rows = ""
                $.each(response.compare, function(key,value){

                    rows += ` <tr class="pr_image">
                    <td class="text-muted font-sm fw-600 font-heading mw-200">Preview</td>
                    <td class="row_img"><img src="/${value.product.product_thambnail}" style="width:300px; height:300px;"  alt="compare-img" /></td>

                    </tr>
                    <tr class="pr_title">
                    <td class="text-muted font-sm fw-600 font-heading">Name</td>
                    <td class="product_name">
                    <h6><a href="shop-product-full.html" class="text-heading">${value.product.product_name} </a></h6>
                    </td>

                    </tr>
                    <tr class="pr_price">
                    <td class="text-muted font-sm fw-600 font-heading">Price</td>
                    <td class="product_price">
                    ${value.product.discount_price == null
                    ? `<h4 class="price text-brand">AED ${value.product.selling_price}</h4>`
                    :`<h4 class="price text-brand">AED ${value.product.discount_price}</h4>`

                } 
                </td>

                </tr>

                <tr class="description">
                <td class="text-muted font-sm fw-600 font-heading">Description</td>
                <td class="row_text font-xs">
                <p class="font-sm text-muted"> ${value.product.short_descp}</p>
                </td>

                </tr>
                <tr class="pr_stock">
                <td class="text-muted font-sm fw-600 font-heading">Stock status</td>
                <td class="row_stock">
                ${value.product.product_qty > 0 
                ? `<span class="stock-status in-stock mb-0"> In Stock </span>`

                :`<span class="stock-status out-stock mb-0">Stock Out </span>`

            } 

            </td>

            </tr>

            <tr class="pr_remove text-muted">
            <td class="text-muted font-md fw-600"></td>
            <td class="row_remove">
            <a type="submit" class="text-muted"  id="${value.id}" onclick="compareRemove(this.id)"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
            </td>

            </tr> ` 

        });

                $('#compare').html(rows); 

            }
        })
    }

    compare();

  // / End Load Compare Data -->

</script>

欢迎提出任何建议。
先谢谢你。

JavaScript

1条答案

按热度按时间
zbwhf8kr

zbwhf8kr1#

您想要的表结构比您当前呈现的表结构更复杂。需要理解的重要部分是，对于每个 row，您希望显示 each product对象的属性。这告诉我们，我们将需要嵌套循环。外部循环将遍历产品属性，内部循环将遍历每个产品。
我们可以从一个键数组开始，它将代表我们的行。每个键将是我们希望在该行中呈现的产品的属性。
如果我们只想在每个产品项对应的键处呈现每个产品项的值，这将非常简单。然而，我们有特定Map逻辑的情况-例如，显示selling_price或discount_price。因此，我们将使用一个函数将产品项Map到键的输出，封装特定的Map逻辑。
我们还应该包含一个对象来将行键Map到友好的显示值。
请注意，在我提供的示例代码中，我没有包含CSS类或HTML的任何其他属性。这只是基本的HTML。

const response = {
  compare: [
    {
      product: {
        discount_price: null,
        product_thumbnail: 'https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80',
        product_name: 'Product One',
        product_qty: 5,
        selling_price: 100,
        short_descp: 'A little about Product One'
      }
    },
    {
      product: {
        discount_price: 199,
        product_thumbnail: 'https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80',
        product_name: 'Product Two',
        product_qty: 0,
        selling_price: 200,
        short_descp: 'A little about Product Two'
      }
    }
  ]
}

$('#compareQty').text(response.compareQty);

const getItemDisplayForRowKey = (item, key) => {
  if (key === 'product_qty') {
    return item.product.product_qty > 0 ? 'In Stock' : 'Stock Out';
  } else if (key === 'product_thumbnail') {
    return `<img src="${item.product.product_thumbnail}">`;
  } else if (key === 'selling_price') {
    return item.product.discount_price || item.product.selling_price;
  }
  
  return item.product[key];
}

const rowHeading = {
  product_thumbnail: '',
  product_name: 'Name',
  product_qty: 'Quantity',
  selling_price: 'Price',
  short_descp: 'Description'
};

const html = ['product_thumbnail', 'product_name', 'product_qty', 'selling_price', 'short_descp'].map(rowKey => {
  return `
    <tr>
      <td>${rowHeading[rowKey]}</td>
      ${response.compare.map(item => {
        return `<td>${getItemDisplayForRowKey(item, rowKey)}</td>`
      })}
    </tr>
  `
});

$('#compare').html(html);
table {
  border: 1px solid black;
  border-collapse: collapse;
}

tr {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-header breadcrumb-wrap">
  <div class="container">
    <div class="breadcrumb">
      <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
      <span></span> Compare
    </div>
  </div>
</div>
<div class="container mb-80 mt-50">
  <div class="row">
    <div class="col-xl-10 col-lg-12 m-auto">
      <h1 class="heading-2 mb-10">Products Compare</h1>
      <h6 class="text-body mb-40">There are products to compare</h6>
      <div class="table-responsive">
        <table class="table text-center table-compare">

          <tbody id="compare"></tbody>

        </table>
      </div>
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-04-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com