我正在将我们的网页旧的基于jQuery的DOM操作转换为vanilla 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,并为每个类重写单独的脚本,但我喜欢index / eq系统为添加或删除菜单面板提供的灵活性。
由于
答案 0 :(得分:2)
创建两者的原型模拟索引和 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);
希望有所帮助,您可以从这里按照您的要求进行操作!
答案 1 :(得分:1)
好吧我做了一个小提琴: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的标志属性。