问题描述
- 请js大神帮忙修改成为面向对象写法（应用prototype）
-
HTML结构如下：
<body> <ul class="rolinList" id="rolin"> <li> <h2>下拉标题 1</h2> <div class="content"> <p>下拉展开后显示内容<br /> <br /> <a href="###" target="_blank">下拉显示内容</a></p> </div> </li> <li> <h2>下拉标题 2</h2> <div class="content"> <p>下拉展开后显示内容<br /> <br /> <a href="###" target="_blank">下拉显示内容</a></p> </div> </li> <li> <h2>下拉标题 3</h2> <div class="content"> <p>下拉展开后显示内容<br /> <br /> <a href="###" target="_blank">下拉显示内容</a></p> </div> </li> <li> <h2>下拉标题 4</h2> <div class="content"> <p>下拉展开后显示内容<br /> <br /> <a href="###" target="_blank">下拉显示内容</a></p> </div> </li> <li> <h2>下拉标题 5</h2> <div class="content"> <p>下拉展开后显示内容<br /> <br /> <a href="###" target="_blank">下拉显示内容</a></p> </div> </li> <li> <h2>下拉标题 6</h2> <div class="content"> <p>下拉展开后显示内容<br /> <br /> <a href="###" target="_blank">下拉显示内容</a></p> </div> </li> </ul> </body>JS代码如下：
// JavaScript Document //<![CDATA[ window.onload = function() { rolinTab("rolin") } function rolinTab(obj) { var list = $(obj).getElementsByTagName("LI"); var state = { show: false, hidden: false, showObj: false }; for (var i = 0; i < list.length; i++) { var tmp = new rolinItem(list[i], state); if (i == 0) tmp.pShow(); } } // 构造函数 function rolinItem(obj, state) { //alert(obj.parentNode.children.length) // test var speed = 0.0666; var range = 1; var interval; var tarH; var head = getFirstChild(obj); var content = getNextChild(head); var isOpen = false; var tar = this; this.pHidden = function() { if (isOpen) hidden(); } this.pShow = show; var baseH = content.offsetHeight; content.style.display = "none"; // 初始化，所有的 li 下的content 都隐藏 var isOpen = false; head.onmouseover = function() { this.style.background = "#EFEFEF"; } head.onmouseout = mouseout; head.onclick = function() { this.style.background = "#EFEFEF"; if (!state.show && !state.hidden) { if (!isOpen) { head.onmouseout = null; show(); } else { hidden(); } } } function mouseout() { this.style.background = "#FFF" } function show() { head.style.borderBottom = "1px solid #DADADA"; if (state.openObj && state.openObj != tar) // 备注：未被点击的 li 为 的隐藏掉 { state.openObj.pHidden(); } content.style.height = "0px"; content.style.display = "block"; content.style.overflow = "hidden"; state.openObj = tar; state.show = true; tarH = baseH; interval = setInterval(move, 10); } function showS() { isOpen = true; state.show = false; } function hidden() { state.hidden = true; tarH = 0; interval = setInterval(move, 10); } function hiddenS() { head.style.borderBottom = "none"; /* 备注：以下两句貌似可以省略 head.onmouseout = mouseout; head.onmouseout(); */ content.style.display = "none"; isOpen = false; state.hidden = false; } function move() { var dist = (tarH - content.style.height.pxToNum()) * speed; if (Math.abs(dist) < 1) dist = dist > 0 ? 1 : -1; content.style.height = (content.style.height.pxToNum() + dist) + "px"; if (Math.abs(content.style.height.pxToNum() - tarH) <= range) { clearInterval(interval); content.style.height = tarH + "px"; if (tarH != 0) { showS() } else { hiddenS(); } } } } // Tools var $ = function($) { return document.getElementById($) }; String.prototype.pxToNum = function() { return Number(this.replace("px", "")) } function getFirstChild(obj) { var result = obj.firstChild; while (!result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling; while (!result.tagName) { result = result.nextSibling; } return result; } //]]>
解决方案
就你的代码，直接定义一个对象，把方法装进去就可以了。面向对象不是用对象，要看你的场景，也就是你要做什么。
时间： 2024-12-22 09:00:36