香草 js 替换 jQuery 的 index() 和 eq()
Vanilla js replacements for jQuery's index() and eq()
我正在将我们网页上较旧的基于 jQuery 的 DOM 操作转换为普通的 javascript,大多数都出奇地容易,但浮出控件菜单遇到了障碍。
我们使用选项卡和隐藏菜单div 的简单格式:
<div class="tab">tab 1</div>
<div class="tab">tab 2</div>
<div class="tab">tab 3</div>
<div class="tab">tab 4</div>
<div class="menu">menu 1</div>
<div class="menu">menu 2</div>
<div class="menu">menu 3</div>
<div class="menu">menu 4</div>
以前基于 jQuery 的系统使用 .index() 来确定单击了哪个选项卡,然后使用 .eq() 来控制显示哪个隐藏菜单。
我现在想知道我如何用vanilla javascript做同样的事情。
在更糟糕的情况下,我可以将类重命名为 tab1、tab2、menu1、menu2 并为每个类编写单独的脚本,但我喜欢索引/eq 系统为添加或删除菜单面板提供的灵活性。
谢谢
两者的原型都是模拟索引和 eq jquery 函数创建的。检查下面的小提琴链接:
考虑以下 HTML
<div class="menu">menu 1</div>
<div id='two' class="menu">menu 2</div>
<div class="menu">menu 3</div>
<div class="menu">menu 4</div>
http://jsfiddle.net/w4hL4u6z/1/
function index(element){
var sib = element.parentNode.childNodes;
var n = 0;
for (var i=0; i<sib.length; i++) {
if (sib[i]==element) return n;
if (sib[i].nodeType==1) n++;
}
return -1;
}
alert(index.call(this,document.getElementById('two')));
function eq(index) {
if(index>=0 && index < this.length)
return this[index];
else
return -1;
}
var e= document.getElementsByClassName('menu');
alert(eq.call(e,1).textContent);
希望对您有所帮助,您可以从这里开始满足您的要求!
好吧,我做了一个小提琴:http://jsfiddle.net/cw0gpa7k/15/
基本上,您必须通过索引获取dom元素并基于此附加函数。您必须使用属性使项通过您附加的匿名函数。请参阅下面的代码:
var menus = document.getElementsByClassName('menu');
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < menus.length; i++) {
menus[i].index = i;
tabs[i].isShown = false;
menus[i].onclick = function() {
if (!tabs[this.index].isShown) {
tabs[this.index].style.display = 'block';
tabs[this.index].isShown = true;
}
else {
tabs[this.index].style.display = 'none';
tabs[this.index].isShown = false;
}
}
}
请注意,要馈送给 onclick 的匿名函数,我使用属性菜单 [i].index = i;这就是你在 JavaScript 中馈送东西的方式。将属性添加到 dom 对象。反正我就是这么做的。isShow 的东西只是一个最初初始化为 false 的标志属性。
相关文章:
- Emberjs应用程序加载在除Index之外的所有路由上
- 分析高度属性时出现意外值{{specs.height}}.index.html
- 主干模板:index.jst.eco到index.jst.ejs
- 将 jQuery 代码添加到 Index.aspx 页面
- AngularJS-需要在index.html页面中访问来自服务的数据
- 更改基于它的Select OPTION's INDEX(Jquery)
- 尝试创建一个具有z-index的堆叠菜单'使用HTML5/CSS3/JS
- index.html使用webpack开发服务器未重新加载
- 从index.html调用函数,该函数无限循环
- RouteChangeStart事件在初始index.html页面加载时触发
- Is (!~index) faster than (index === -1)?
- KOValidation在错误消息中获取可观察值、$index()、$data等
- 为什么我可以'不要使用xx[this.index].style.display?它's说“;无法读取属性
- jQuery eq()导致无限迭代
- Angular2:Index.html没有't显示该文件;正在加载&”;
- 如何使用gulp-inject将文件的内容插入到我的index.html中
- 如何在ng repeat angular js中使用$index
- 使用index.ts文件导出类会导致注入的构造函数中未定义
- Combine $(this) and $("li:eq(ui.item.index())")
- 香草 js 替换 jQuery 的 index() 和 eq()