Javascript在F#安全中的替代
提问于 2020-11-09 12:50:41
我在一个页面上有两个匹配大小的div，并且希望隐藏其中一个并显示另一个，在它们之间交换按钮单击。通常，我会使用javascript事件来切换显示，但是我不知道如何使用带有SAFE的默认Javascript，并且想知道是否有一个F#选项。
我希望得到类似于此的结果(但在F#中)：
var divs = document.getElementsByClassName("square");
var inactive = document.getElementsByClassName("square inactive");
function swapDivsOnClick(div) {
active = document.getElementById(div);
inactive[0].classList.remove("inactive");
active.classList.add("inactive");
}.square {
width: 150px;
height: 150px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
.inactive {
display: none;
}
h1 {
color: white;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<title>Page Title</title>
</head>
<body>
<div id="red" class="square">
<button class="toggle" onclick="swapDivsOnClick('red')">Click Me</button>
<h1>Div 1</h1>
</div>
<div id="green" class="square inactive">
<button class="toggle" onclick="swapDivsOnClick('green')">Click Me</button>
<h1>Div 2</h1>
</div>
</body>
<script src="js/scripts.js"></script>
</html>
回答 1
Stack Overflow用户
发布于 2020-11-09 13:16:12
你不需要onclick="swapDivsOnClick('red')"
试着用它
var divs = document.getElementsByClassName("square");
if(divs.length) {
for (let el of divs) {
el.addEventListener("click", function(e) {
// here you can remove "inactive" class from all elements
for (let elem of divs) {
elem.classList.remove("inactive");
}
// and the add "inactive" class to current clicked element
this.classList.add("inactive");
})
}
}它将从所有div中删除“非活动”类，然后将该类添加到当前单击的div中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64759094
复制相关文章
腾讯云开发者
