2 beeing007 beeing007 于 2015.07.05 11:48 提问

请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;
  }

//]]>

1个回答

caozhy
caozhy   Ds   Rxr 2015.07.05 18:48

就你的代码,直接定义一个对象,把方法装进去就可以了。面向对象不是用对象,要看你的场景,也就是你要做什么。

Csdn user default icon
上传中...
上传图片
插入图片