javascript - 单击元素时将元素 ID 传递给 js 函数

Question

我有一个带有选项卡样式 View 的页面，如下所示:http://demos.inspirationalpixels.com/Tabs-with-HTML-CSS-&-jQuery/

我的问题是我在每个选项卡上都有表单，在页面上的选项卡之外我有一个按钮可以重置所有表单并提交，但我想要一个重置当前顶部选项卡上的表单的按钮。

所以我认为最好的方法就是拥有它，以便在单击选项卡时将一个值发送到选项卡表单重置脚本，这样它就知道在单击时要重置哪个表单。

表单的 ID 为“tabf1”、“tabf2”等，因此我只需要单击标签即可发送标签编号。

我尝试过的:

<ul class="tab-links">
    <li onclick="setTabNo(this)" id="1"  class="active">    
    <a href="#tab1">Basic</a></li>

    <li onclick="setTabNo(this)" id="2" ><a href="#tab2">Earnings</a></li>

    <li onclick="setTabNo(this)" id="3" ><a href="#tab3">Deductions</a></li>

    <li onclick="setTabNo(this)" id="4" ><a href="#tab4">Taxes</a></li>
</ul>


function resetAll() {
    document.getElementById("tabf1").reset();
    document.getElementById("tabf2").reset();
    document.getElementById("tabf3").reset();
    document.getElementById("tabf4").reset();
}

var tabNo;
function setTabNo() {
    var tabNo = this.id;
}

function resetTab() {
    document.getElementById("tabf"+tabNo).reset();
}

我已经尝试将 on click 和 id 作为 aswell 的一部分，这基于下面的答案，但仍然对我不起作用。

该变量正在另一个函数中调用，但应该没问题，因为我首先在两者之外定义了它。

已解决:

遗憾的是它没有获取 id，但我只是将 id 值放在 onlick 的函数括号中。

所以:

onclick="setTabNo('2')"

然后:

function setTabNo(idv) {
    tabNo = idv;
}

Answer 1

你根本不需要传递 ID，它已经作为被点击元素的属性可用:

function setTab2(element) {
    var id = element.id;
    ...
 }

然后将 onclick 属性更改为 onclick="setTab2(this)"。后者确保向点击处理程序传递对被点击元素的引用。

请注意，最好根本不使用内联事件处理程序:

$('#2').on('click', setTab2);

注意:数字 ID 只允许在 HTML5 中使用，不允许在 CSS3 中使用。