我在新的ES6代码中编写了一个简单的js选项卡,但我对变量范围和导出类有点麻烦。
这是我的代码
import $ from 'jquery';
import '../css/_style.scss';
import './mediaupload.js';
//
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tablinks = document.getElementsByClassName("tablinks");
class SMDVadmin{
openTab(evt, tabname){
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
}
export default SMDVadmin;
我正在使用函数openTab
作为
<ul>
<li><a href="#" onClick="openTab(e, tab1)" id="th1">HOme</a></li>
<li><a href="#" onClick="openTab(e, tab2)" id="th2">Address</a></li>
</ul>
但点击有一个错误Uncaught ReferenceError: openTab is not defined
但是,如果我这样编码,它的工作:):
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tablinks = document.getElementsByClassName("tablinks");
const openTab = (evt, tabname) => {
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
window.openTab = openTab;
但是我有更多其他功能,我希望他们保持在一个类中以保持完整性
通过将它放在一个类中,你已经有效地“命名”了你的openTab
方法。您必须创建该类的实例,然后在该实例上调用该方法。
var smdvAdmin = new SMDVadmin()
smdvAdmin.openTab()
或者,您可以使方法成为静态,因此不需要新实例:
class SMDVadmin{
static openTab(evt, tabname){}
}
SMDVadmin.openTab()
如果要从文件导入单个方法,则可能根本不需要该类。
您可以改为只导出方法
const openTab = (evt, tabname) => {}
export default openTab;