时间戳

首页 > 解决方案 > 切换脚本：从 jQuery 更改为“普通 javascript”代码

javascript - 切换脚本：从 jQuery 更改为“普通 javascript”代码

问题描述

我一直在为使用 jQuery 的网站使用切换脚本（单击某个链接时打开/关闭文本容器）。为了清理网站，我想完全摆脱 jQuery，但在将现有 jQuery 代码转换为“普通 javascript”时遇到了一些问题。

这是现有的代码：

jQuery(function($){
$(document).ready(function(){
    $(".toggle_container").hide();
    $("h4.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("normal");
        return false; //Prevent the browser jump to the link anchor
});
});
});

对应于这个 HTML 源代码：

<h4 class="trigger toggle-transparent "><a href="#">Click to show more</a></h3><div class="toggle_container ">
Hidden Text
</div>

我已经尝试了以下代码，它没有给我一个错误，但在单击触发器时没有做任何事情：

var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
    el[i].addEventListener('click', function () {
        this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
    }.bind(this));
}

我真正需要的代码是：单击“触发器”类应该将一些 HTML 类“活动”切换到触发器元素和 toggle_container 元素。其余的我可以只用 CSS 来改变。

代码的难点在于它应该分别用于一个页面上的多个切换区域（因此使用类，而不是 id）。

任何想法我的代码有问题或任何（完全）不同的建议？

我在 javascript/jQuery 方面的经验非常有限，并且对 HTML/CSS 感觉更自在。

谢谢，帕特里克

标签： javascriptjquery

解决方案

this.classList.toggle("active")不会再次返回元素，而只是一个布尔值，用于通知操作是否成功。链接只发生在 jQuery 中，而不是原生 JavaScript。

this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");

你应该使用这样的东西而不是上面的：

this.classList.toggle("active");
this.nextSibling.classList.toggle("toggle_container-active");

推荐阅读