Javascript 列表视图到网格视图问题

Question

我试图创建一个简单的应用程序，我们可以在列表视图和网格视图之间切换。但是像往常一样出现了一些问题。如果我在 Js 中单独自定义列表视图，那么它工作正常，看起来像这样-

但是当我尝试使用 flexbox 添加网格视图并应用事件侦听器时，网格选项工作正常。像这样-

但是如果它再次切换，那么列表样式会以某种方式适应为 grid.like this-

制作的那些 flexboxes

我的JS代码-

//Assigning UI
const productRow = document.querySelector(".row");
const images = document.querySelectorAll(".image");
const productTemplate = document.querySelectorAll('.product');
const unorderedList = document.querySelectorAll('ul');
const productItems = document.querySelectorAll('.product-item');
const buyBtn = document.querySelectorAll('.buy');
const productHeading = document.querySelectorAll('h3');
const listView = document.querySelector('#list-view');
const gridView = document.querySelector('#grid-view');
const btnSection = document.querySelector('.buttons');

//Css variables
const borderShadow = '-webkit-box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);-moz-box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);';
const mainBtn = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;

//Listen For Events
btnSection.addEventListener('click',function(e){
    let targetElement = e.target;
    if(targetElement.id === 'list-view'){
        listViewOperation();
    }else if(targetElement.id === 'grid-view'){
        gridStyleView();
    }else{
        e.preventDefault();
    }
});

//By default grid style
gridStyleView();

//universal
document.body.style.cssText ="font-family: 'Ubuntu', sans-serif;";

//remove buttes
iteration(unorderedList, "list-style-type: none;");

// //Resizing buttons
listView.style.cssText = mainBtn;
gridView.style.cssText = mainBtn;

//Iteration function
function iteration(itarator,cssElements){
    itarator.forEach(function(variable){
        variable.style.cssText = cssElements;
    });
}

function listViewOperation(){
    //list Test
    //Productlist view flex
    iteration(productTemplate, `display:flex;border:1px solid transparent;${borderShadow};margin:2% 1%;;border-radius:15px;justify-content:space-evenly;`);

    //Images
    iteration(images, "width:10%;");

    //Buybutton
    iteration(buyBtn, "width:15%;height:10%;transform:translateY(30%);");

    //Heading
    iteration(productHeading, "transform:translateY(30%);");
}

//gridview function
function gridStyleView(){
    //grid view
    productRow.style.cssText = "display:flex;";

    //For Images
    iteration(images,"width:50%;");

    //For Product Template
    iteration(productTemplate,`text-align:center;border:1px solid transparent;${borderShadow};margin:2% 1%;;border-radius:15px;justify-content:space-evenly;padding:1%;`);

    //For buy now button
    iteration(buyBtn,"width:60%;height:23%;transform:translateY(-10%);");
}

我的HTML代码

<div class="container">
        <div class="buttons">
            <button type="submit" value="list" id="list-view"><i class="fas fa-list"></i></button>
            <button type="submit" value="grid" id="grid-view"><i class="fas fa-th-large"></i></button>
        </div>
        <div class="row">
            <div class="product">
                <img class="image product-item" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone11-select-2019-family?wid=882&amp;hei=1058&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1567022175704" alt="Iphone11">
                <h3>Apple Iphone 11</h3>
                <ul>Description
                    <li>256 GB Storage</li>
                    <li>6Gb Ram</li>
                    <li>Wide Lense Camera</li>
                    <li>Bionic A13 Chip</li>
                    <li>Attractive EMI OFFER</li>
                    <li>Exchange For Your Kidney</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
            <div class="product">
                <img class="image" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone11-select-2019-family?wid=882&amp;hei=1058&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1567022175704" alt="Iphone11">
                <h3>Apple Iphone 11</h3>
                <ul>Description
                    <li>256 GB Storage</li>
                    <li>6Gb Ram</li>
                    <li>Wide Lense Camera</li>
                    <li>Bionic A13 Chip</li>
                    <li>Attractive EMI OFFER</li>
                    <li>Exchange For Your Kidney</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
            <div class="product">
                <img class="image" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone11-select-2019-family?wid=882&amp;hei=1058&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1567022175704" alt="Iphone11">
                <h3>Apple Iphone 11</h3>
                <ul>Description
                    <li>256 GB Storage</li>
                    <li>6Gb Ram</li>
                    <li>Wide Lense Camera</li>
                    <li>Bionic A13 Chip</li>
                    <li>Attractive EMI OFFER</li>
                    <li>Exchange For Your Kidney</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
            <div class="product">
                <img class="image" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone11-select-2019-family?wid=882&amp;hei=1058&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1567022175704" alt="Iphone11">
                <h3>Apple Iphone 11</h3>
                <ul>Description
                    <li>256 GB Storage</li>
                    <li>6Gb Ram</li>
                    <li>Wide Lense Camera</li>
                    <li>Bionic A13 Chip</li>
                    <li>Attractive EMI OFFER</li>
                    <li>Exchange For Your Kidney</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
        </div>
    </div>

没有使用外部框架。任何建议或帮助将不胜感激，并对我的混乱代码感到抱歉，因为我没有使用 CSS.

Answer 1

我已经检查了你的代码并找出了问题所在。当您单击“列表视图”时，只需添加“flex-direction: column;” 属性到 div 和 class= 行。以下是您需要添加的完整行。

productRow.style.cssText = "display:flex;flex-direction:column";

将此添加到您的 listViewOperation 函数，一切都会正常工作。

Answer 2

我试图在理解您的代码时考虑到 CSS 或 bootstrap。但你可以试试这个：

设置四 (4) 类, 2 控制#products-container 和.product 的列表视图和 2 控制 #products-container 和 .product

的网格视图

在这种情况下，单击其按钮时，您可以执行 .addClass() 和 .removeClass() 来反映您想要的内容。尝试：

.products-container-list-view {
   display: grid;
   grid-template-column: 1fr;
}

.product-list-view {
   display: flex;
}

.products-container-grid-view {
   display: grid;
   grid-template-column: 1fr 1fr 1fr;
}

.product-grid-view {
   display: flex;
   flex-direction: column;
}

.product {
   justify-content: center;
   align-items: center;
}

$('#grid-view-btn').on('click', () => {
  $('#products-container').addClass('.products-container-grid-view');
  $('.product').addClass('.product-grid-view');
  $('#products-container').removeClass('.products-container-list-view');
  $('.product').removeClass('.product-list-view');
}

$('#list-view-btn').on('click', () => {
  $('#products-container').addClass('.products-container-list-view');
  $('.product').addClass('.product-list-view');
  $('#products-container').removeClass('.products-container-grid-view');
  $('.product').removeClass('.product-grid-view');
}

您可以在这些类上使用媒体查询来提高响应速度。

另一种方法：

放

<div id="products-container">

在你

之后

<div class="row">

将#product-container设置为display: flex；证明内容：居中；对齐项目：居中； 将每个 .product 设置为 display: flex;证明内容：居中；对齐项目：居中；

这应该会为您提供列表视图布局，点击它的按钮也应该会起作用。

对于网格视图：

$('#grid-view').on('click', () => {
  $('#products-container').css('flex-direction', 'column');
  $('.products').css('flex-direction', 'column');
}

拜托，这里你应该为 .product 设置一个宽度，并为它们计算或等于 margins/paddings，这样它们就可以很好地对齐。

注意：我选择这种方法是为了方便响应

Javascript 列表视图到网格视图问题

Javascript list view to grid view problem

javascript

dom

dom-events

flexbox