任何减少togTriggers所需数量的方法
any way to decrease the amount of togTriggers needed?
我使用以下脚本在鼠标悬停时打开一个框并单击。在我的页面上有很多盒子等待打开，还有更多的盒子等待打开。我能让这些盒子工作的唯一方法是为每个盒子创建一个新的togTrigger。即使相同的单词在页面的不同位置打开了相同的框，我也需要一个新的togTrigger。最终我将以togTrigger1到togTrigger200之类的结尾。这不是很实际。有什么方法可以减少togTriggers的数量吗?
<script type="text/javascript">
<!-- HIDE FROM OLD BROWSERS
/* <![CDATA[ */
var oVTog = {
toggle: function (el) {
var container = el.parentNode;
var para = container.getElementsByTagName('p')[0];
para.style.display = "none";
var isClicked = false;
el.onmouseover = function () {
para.style.display = '';
return false;
};
el.onmouseout = function () {
if (!isClicked)
para.style.display = 'none';
return false;
};
el.onclick = function () {
// if it's clicked, change it to TRUE
// if it's clicked again, change it back to FALSE
isClicked = !isClicked; // toggle
para.style.display = ((isClicked) ? '' : 'none');
return false;
};
}
};
window.onload = function () {
var l = document.getElementById('togTrigger');
oVTog.toggle(l);
l = document.getElementById('togTrigger2');
oVTog.toggle(l);
l = document.getElementById('togTrigger3');
oVTog.toggle(l);
l = document.getElementById('togTrigger4');
oVTog.toggle(l);
l = document.getElementById('togTrigger5');
oVTog.toggle(l);
l = document.getElementById('togTrigger6');
oVTog.toggle(l);
l = document.getElementById('togTrigger7');
oVTog.toggle(l);
l = document.getElementById('togTrigger8');
oVTog.toggle(l);
l = document.getElementById('togTrigger9');
oVTog.toggle(l);
l = document.getElementById('togTrigger10');
oVTog.toggle(l);
l = document.getElementById('togTrigger11');
oVTog.toggle(l);
};
/* ]]> */
//END HIDING -->
</script>
这就是我如何在div内的正文中应用脚本(该页面由表内的许多div组成，/p不应该在div内，但它正在工作):
<a href="#" id="togTrigger"><i>text</i></a>
<p class="togContent">
text
</p>
当同一div中有两个或多个文本框时，其他togTriggers在一个span内:
<span><a href="#" id="togTrigger4"><i>text</i></a>
<p class="togContent">
text
</p></span>
你可以使用for循环:
// Handle the first one separately because it doesn't have a number at the end
var l = document.getElementById('togTrigger');
oVTog.toggle(l);
for (var i=2;i< 12;i++){
l = document.getElementById('togTrigger' + i);
oVTog.toggle(l);
}
还可以考虑为所有togTrigger元素分配一个类，选择它们，遍历它们并调用oVTog.toggle。
正如我所提到的，并且正如Matt更清楚地指出的，您可以通过编程方式访问元素—没有必要按名称引用它们。这里有一些代码可以做到这一点。(您可以忽略第一个脚本标签的第一个内容-它们是我在'blank.html'文件中的辅助函数-所有(我的)页面都是从该文件中生成的)
Javascript数组提供forEach函数，不幸的是，NodeLists没有。你可以看到我是如何在myInit2中使用它的。虽然这个例子有点做作——每个元素只发生一件事，但我发现它是一个有用的模式——尽管没有在NodeList中的每个节点上调用的匿名(未命名)函数。
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function mInit()
{
}
</script>
<script type="text/javascript">
<!-- HIDE FROM OLD BROWSERS
/* <![CDATA[ */
var oVTog = {
toggle: function (el) {
var container = el.parentNode;
var para = container.getElementsByTagName('p')[0];
para.style.display = "none";
var isClicked = false;
el.onmouseover = function () {
para.style.display = '';
return false;
};
el.onmouseout = function () {
if (!isClicked)
para.style.display = 'none';
return false;
};
el.onclick = function () {
// if it's clicked, change it to TRUE
// if it's clicked again, change it back to FALSE
isClicked = !isClicked; // toggle
para.style.display = ((isClicked) ? '' : 'none');
return false;
};
}
};
window.addEventListener('load', yourInit, false);
window.addEventListener('load', myInit, false);
window.addEventListener('load', myInit2, false);
function yourInit()
{
// 2 lines per element to toggle. 200items = 400 lines
var l;
l = document.getElementById('togTrigger');
oVTog.toggle(l);
l = document.getElementById('togTrigger4');
oVTog.toggle(l);
};
function myInit()
{
// 4 lines total. 200items = 4 lines
var containerDiv = document.getElementById('myMethod');
var i, nodeList = containerDiv.getElementsByClassName('togTrigger');
for (i=0; i<nodeList.length; i++)
oVTog.toggle(nodeList[i]);
};
function myInit2()
{
var containerDiv = document.getElementById('mySecondMethod');
var i, nodeList = containerDiv.getElementsByClassName('togTrigger');
forEachNode(
nodeList,
function(curItem, curIndex, ndeLst)
{
oVTog.toggle(curItem)
}
);
};
/* ]]> */
//END HIDING -->
</script>
<style>
</style>
</head>
<body>
<div id='yourMethod'>
<a href="#" id="togTrigger"><i>text</i></a>
<p class="togContent">text</p>
<span>
<a href="#" id="togTrigger4"><i>text</i></a>
<p class="togContent">text</p>
</span>
</div>
<div id='myMethod'>
<a href="#" class="togTrigger"><i>text</i></a>
<p class="togContent">text</p>
<span>
<a href="#" class="togTrigger"><i>text</i></a>
<p class="togContent">text</p>
</span>
</div>
<div id='mySecondMethod'>
<a href="#" class="togTrigger"><i>text</i></a>
<p class="togContent">text</p>
<span>
<a href="#" class="togTrigger"><i>text</i></a>
<p class="togContent">text</p>
</span>
</div>
</body>
</html>
相关文章：
- electronic BrowserWindow的最小高度和宽度在hide(）show(）方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用“;这个“;JavaScript原型方法中的关键字
- 序列化数据属性中对象的最可靠方法
- 使用Objective-C的JavaScript注入方法
- 有没有一种方法可以添加相同的项目val＝“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript，有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- toBoolean方法类似于toString
- 如何在单击复选框后调用控制器方法
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 递归使用 eval(） 是检查程序执行的好方法吗?
- 如何在webView，Android中从@JavascriptInterface方法调用Javascript
- toLocaleDateString和toLocaleString方法不尊重机器时区
- 有条件更新d3.js力图中节点的最佳方法
- TypeError:在不兼容的接收器nodejs上调用了方法Uint8Array.length
- 任何减少togTriggers所需数量的方法
