F# 中的 Javascript onclick 替代方案 - 安全

Question

I have two divs of matching sizes on a page, and want to hide one and display the other, swapping between them on a button click.我在一个页面上有两个大小匹配的 div，我想隐藏一个并显示另一个，单击按钮在它们之间交换。 Usually i would use a javascript click event to toggle display, but i am unsure of how to use default Javascript with SAFE, and was wondering if there was an F# alternative.通常我会使用 javascript click 事件来切换显示，但我不确定如何在 SAFE 中使用默认 Javascript，并且想知道是否有 F# 替代方案。

I want results similar to this (but in 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>

Answer 1

You don't need onclick="swapDivsOnClick('red')"你不需要onclick="swapDivsOnClick('red')"

Try to use that尝试使用它

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");
        })
    }
}

It will remove class "inactive" from all divs, and then add the class to current clicked div.它将从所有 div 中删除“非活动”类，然后将该类添加到当前单击的 div。

F# 中的 Javascript onclick 替代方案 - 安全

问题描述

1 个解决方案

解决方案1
1 2020-11-09 21:16:12

F# 中的 Javascript onclick 替代方案 - 安全

问题描述

1 个解决方案

解决方案1 1 2020-11-09 21:16:12

解决方案1
1 2020-11-09 21:16:12