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

Question

我应该在 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

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

请帮忙。

Answer 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>

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

问题描述

1 个解决方案

解决方案1
0 2019-02-15 12:33:39

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

问题描述

1 个解决方案

解决方案1 0 2019-02-15 12:33:39

解决方案1
0 2019-02-15 12:33:39