Javascript jQuery的index()和eq()的替代品
我正在将我们网页上较旧的基于jQuery的DOM操作转换为香草javascript,大多数操作都非常简单,但弹出式菜单撞到了墙上 我们使用选项卡和隐藏菜单div的简单格式:Javascript jQuery的index()和eq()的替代品,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在将我们网页上较旧的基于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="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系统为添加或删除菜单面板提供的灵活性
谢谢好的,我做了一把小提琴: 基本上,您必须通过索引获取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的标志属性。这两个的原型都是模拟index和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>
希望这对您有所帮助,您可以从这里开始满足您的需求 vanilla js中有.index…这非常有效。谢谢但在eq函数的第2行,它必须是index>=0,否则0个索引项将无法工作。至少在我反复尝试的过程中,这似乎解决了这个问题-@汤姆:是的……愚蠢的错误!。。。更改完成。如果您觉得有用,请接受作为答案。谢谢
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);