javascript - 在 JavaScript 中创建选项卡 Controller ？

Question

我正在尝试在 div 上创建一个选项卡 Controller ，该 div 下面有用于内容的 div(每个同级都是一个选项卡)。

给定这个 html:

  <div id="myTabCtl">

    <div id="tab1">
      <img src="https://images.unsplash.com/photo-1546238232-20216dec9f72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" style="width:240px;">
    </div>
    <div id="tab2">
      Cute puppies.
      <img src="https://www.telegraph.co.uk/content/dam/news/2016/05/06/rexfeatures_4950182a_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=240" style="width:240px;">
    </div>
    <div id="tab3">
      No puppies here.
    </div>

  </div>

还有这个 JavaScript:

  Element.prototype.tabs = function () {

    var tabs = [];

    this.classList.add('xTabCtl');

    var tab_bar = document.createElement('ul');
    tab_bar.classList.add('xTabRow');
    this.insertBefore(tab_bar, this.firstChild);

    this.addTab = function (div,label,title,click) {
      if (typeof div == 'string')
        div = document.getElementById(div);
      if (!div) return false;

      div.style.display = 'none';

      var tab_ctl = document.createElement('li');
      tab_ctl.innerHTML = label;
      if (title) tab_ctl.title = title;
      var cnt = tabs.length;
      if (click) {
        tab_ctl.onclick = function () {
          this.setTab(cnt);
          click();
        };
      } else {
        tab_ctl.onclick = function () {
          this.setTab(cnt);
        };
      }
      tab_ctl.style.cursor = 'pointer';
      tab_ctl.style.userSelect = 'none';
      tab_ctl.classList.add('xTabItem');
      tab_bar.appendChild(tab_ctl);

      var tab = {};
      tab.elem = tab_ctl;
      tab.div = div;
      tab.loaded = false;
      tabs[tabs.length] = tab;

      return true;
    }

    this.setTab = function (tab_no) {
      for (var i=0; i<tabs.length; i++) {
        tabs[i].elem.classList.remove('xTabItemSel');
        tabs[i].div.style.display = 'none';
        tabs[i].loaded = false;
      }
      tabs[tab_no].div.style.display = 'block';
      tabs[tab_no].div.classList.add('xTabItemSel');
      tabs[tab_no].loaded = true;
      return;
    }

  };

  document.getElementById('myTabCtl').tabs();
  document.getElementById('myTabCtl').addTab('tab1','Cute Puppies 1','Title 1');
  document.getElementById('myTabCtl').addTab('tab2','Cute Puppies 2','Title 2');
  document.getElementById('myTabCtl').addTab('tab3','No Puppies','Title 3',function(){alert('hello.');});

显然，这使用了主题 css 文件中定义的一些类，但这不是问题。

addTab 有效，但我无法从添加的每个 li 的 onclick 中调用 setTab 。为什么不呢？

也许更大，必须有一种更干净的方法来做到这一点。我喜欢它将选项卡添加为 li，这样我使用的文档只需添加包装器和该内容。屏幕上可能有多个选项卡控件。我没有使用可用的库，因为大多数库都太过分了，我想将其限制为 addTab 和 setTab。

Answer 1

这个问题与clouser有关，当您在事件句柄内调用this.setTab时，this的引用是本地的，因此它不会获取实际的setTab方法。

Element.prototype.tabs = function () {

    var tabs = [], _this = this;

    this.classList.add('xTabCtl');

    var tab_bar = document.createElement('ul');
    tab_bar.classList.add('xTabRow');
    this.insertBefore(tab_bar, this.firstChild);


    this.addTab = function (div,label,title,click) {
      if (typeof div == 'string')
        div = document.getElementById(div);
      if (!div) return false;

      div.style.display = 'none';

      var tab_ctl = document.createElement('li');
      tab_ctl.innerHTML = label;
      if (title) tab_ctl.title = title;
      var cnt = tabs.length;
      if (click) {
        tab_ctl.onclick = function () {
          _this.setTab(cnt);
          click();
        };
      } else {
        tab_ctl.onclick = function () {
          _this.setTab(cnt);
        };
      }
      tab_ctl.style.cursor = 'pointer';
      tab_ctl.style.userSelect = 'none';
      tab_ctl.classList.add('xTabItem');
      tab_bar.appendChild(tab_ctl);

      var tab = {};
      tab.elem = tab_ctl;
      tab.div = div;
      tab.loaded = false;
      tabs[tabs.length] = tab;

      return true;
    }

    this.setTab = function (tab_no) {
      for (var i=0; i<tabs.length; i++) {
        tabs[i].elem.classList.remove('xTabItemSel');
        tabs[i].div.style.display = 'none';
        tabs[i].loaded = false;
      }
      tabs[tab_no].div.style.display = 'block';
      tabs[tab_no].div.classList.add('xTabItemSel');
      tabs[tab_no].loaded = true;
      return;
    }

  };

  document.getElementById('myTabCtl').tabs();
  document.getElementById('myTabCtl').addTab('tab1','Cute Puppies 1','Title 1');
  document.getElementById('myTabCtl').addTab('tab2','Cute Puppies 2','Title 2');
  document.getElementById('myTabCtl').addTab('tab3','No Puppies','Title 3',function(){alert('hello.');});