如何使用 javascript 更改网格的列样式答案

【问题标题】：How do I change column style of grid using javascript如何使用 javascript 更改网格的列样式
【发布时间】：2019-02-15 11:58:33
【问题描述】：

我应该在 JTML 和 Javascript 中进行哪些更改。

var opac;
function checkfun()
{
opac=(Array.from(document.querySelectorAll('input[type="checkbox"]'))
                          .filter((checkbox)=>checkbox.checked)
                        .map((checkbox)=>checkbox.value));
}

body
{
    display: flex;
    font-family: "Montserrat", sans-serif;
}


.form
{
    width: 15vw;
    height: 500px;
    border: 1px solid black;
}
.mySidebar
{
    height: 500px;
    display: block;  
}

.mySidebar ul
{
    font-size: large;
    font-weight: bold;
    color: rgb(110, 110, 110);
}
.mySidebar li
{
    font-size: medium;
    font-weight: normal;
    color: black;
    list-style: none;
}
/*--------------------------------------------------------------*/
.color-block
{
    margin-left: 30px;
    width: 70vw;
    display: block;
}

.col-sm-4
{
    margin-bottom: 30px;
}
.data-grid
{
    border: 1px solid rgb(189, 189, 189);
    border-radius: 5px;
    max-height: auto;
    display: block;
}
/*-----------------colors-----------------*/
.red{
    background: red;
    widows: 100%;
    height: 400px;
}

.blue{
    background: blue;
    widows: 100%;
    height: 400px;
}

.green{
    background: green;
    widows: 100%;
    height: 400px;
}

.yellow{
    background: yellow;
    widows: 100%;
    height: 400px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>

<!-- Sidebar/menu -->
<div class="form">
    <div class="mySidebar">
  
        <div >
            <ul >Colours
                <li><input type="checkbox"  name="a" value="Red"   onclick="checkfun()"> Red</li>
                <li><input type="checkbox"  name="a" value="Blue" onclick="checkfun()"> Blue</li>
                <li><input type="checkbox"  name="a" value="Green"  onclick="checkfun()"> Green</li>
                <li><input type="checkbox"  name="a" value="Yellow"      onclick="checkfun()"> Yellow</li>
            </ul>

            <ul>Color Value
                <li><input type="checkbox" name="a" value="5" onclick="checkfun()"> 5</li>
                <li><input type="checkbox" name="a" value="6" onclick="checkfun()"> 6</li>
            </ul>
        </div>
    </div>
</div>

<!-- Sidebar/menu -->
<div class="color-block">
    <div class="row">

        <div class="col-sm-4">
            <div class="data-grid">
                <div class="red">
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="data-grid">
                <div class="blue">
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="data-grid">
                <div class="green">
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="data-grid">
                <div class="yellow">
                </div>
            </div>
        </div>

    </div>
</div>


</body>
</html>

这是codepen的链接：CodePen

当我点击一个复选框时，只有匹配条件应该是不透明的，其他的应该是透明的。也就是说，如果我点击红色，那么只有红色网格列应该是不透明的，其他颜色是透明的。

请帮忙。

【问题讨论】：

请看How to create a Minimal, Complete, and Verifiable example
看起来您甚至还没有尝试在这方面实现任何东西，这会使这个问题变得过于宽泛而无法开始。我的建议是你去找一些教程来解释如何基于复选框构建元素过滤器。
stackoverflow.com/questions/32402030/…的可能重复

标签： javascript html css

【解决方案1】：

如果您对代码有任何疑问，请随时提问 :)

document.querySelectorAll("input").forEach(e=>e.addEventListener("change",(e)=>{
    var box = document.getElementById(e.target.value);
      if(e.target.checked)
        box.style.display = ''
      else
        box.style.display= "none"
    }))

.box{
    width: 5em;
    height: 5em
}

#red{
    background: red
}

#green{
    background: green
}

<li><input type="checkbox" value="red" checked>Red</li>
<li><input type="checkbox" value="green" checked>Green</li>

<div>
  <div class="box" id="red"></div>
  <div class="box" id="green"></div>
</div>

【讨论】：

OP 和未来的研究人员不必询问您的解决方案是如何工作的。你应该解释你的解决方案是如何工作的，以及为什么它是一个好主意。
加入一些评论，这会有所帮助:)