Javascript .change（）和.toggle（）的非JQuery版本是什么？

如何将此代码的JQuery版本转换为非JQuery

JQuery .change和.toggle的非JQuery版本是什么

$fn变为窗口。addEventListener'load'，fn $'id'成为文档。getElementById'id' $jqo.changefn成为元素。addEventListener'change'，fn 基于bool元素更改可见性。style.display=bool？：'没有 最后，在您的节点上触发一个更改事件，这在vanilla中有点复杂，具体取决于您想要支持的浏览器，但是您可以将element.dispatchEvent与新的Eventtype一起使用

所以总的来看,

window.addEventListener('load', function () {
    document.getElementById('isTracefile')
        .addEventListener('change', function () {
            document.getElementById('cttracefile')
                .style.display = this.checked ? '' : 'none';
            document.getElementById('custom')
                .style.display = !this.checked ? '' : 'none';
        });
    document.getElementById('isTracefile').dispatchEvent(new Event('change'));
});

---

这可以用作非jquery解决方案。您只需设置初始值

var isTrace = document.getElementById('isTracefile');
var ctTrace = document.getElementById('cttracefile');
var custom = document.getElementById('custom');

isTrace.onchange = function(){
    if (isTrace.checked) {
        ctTrace.style.display = "none";
        custom.style.display = "block";
    } else {
        custom.style.display = "none";
        ctTrace.style.display = "block";
    }
};

---

Demo fiddle:

您是说在文件中使用html标记吗？这会将所有内容保存在一个文件中-jquery几乎是您在小提琴上使用javascripton可以得到的规则-您只需将jquery复制粘贴到index.html中，就像…*jquery的东西*是的，我可以这样做；但我想jQuery是一个需要复制到html文件上的大文件。不过，如果只使用jQuery，if-else应该不是什么大问题！我需要把它作为一些自编函数来完成。你是什么意思…jquery是一个需要复制的大文件？JS部分正在处理中。我也会在这里编辑这个问题。那我该怎么办？！我有我自己的服务器发送文件，我需要调试和东西。我想使index.html尽可能小。这很公平！谢谢实际上，复选框应该是另一种方式，但这只是一个添加的问题；谢谢。如果您不等待页面加载，TypeError:无法读取null的“onchange”属性，而且您还没有第一次触发它，尽管这是对您编写方式的一个非常简单的补充it@Adjit想知道为什么它在我的浏览器Opera上不起作用，也就是说，这不应该是一件特别的事情…@TinaJasmin很可能与Paul S.上面的评论有关。确保在运行脚本之前加载了页面，否则，如果未加载元素，则元素的检索可能返回nullyet@Adjit我更改了一些部分并应用了document.onload，但没有更改。你知道有什么办法解决它吗？

var isTrace = document.getElementById('isTracefile');
var ctTrace = document.getElementById('cttracefile');
var custom = document.getElementById('custom');

isTrace.onchange = function(){
    if (isTrace.checked) {
        ctTrace.style.display = "none";
        custom.style.display = "block";
    } else {
        custom.style.display = "none";
        ctTrace.style.display = "block";
    }
};