进行识别单击哪个按钮的功能

时间:2019-02-05 21:30:14

标签: javascript html function button

我的HTML中有3个按钮,三个滑雪胜地各有一个。单击按钮后,我想显示相关信息。

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0">Stranda</button>
    <button id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

我有这个工作,但是问题是我已经制作了3个独立的函数,我相信可以很容易地将它们变成1。

如果所有onclick事件都移到同一个函数,如何使该函数检测单击了哪个按钮,以便它显示正确的信息?

function boot() 
{
    document.getElementById("btnStranda").onclick = infoStranda;
    document.getElementById("btnOveroeye").onclick = infoOveroeye;
    document.getElementById("btnFjellseter").onclick = infoFjellseter;
}

Pastebin

3 个答案:

答案 0 :(得分:3)

当函数通过Event触发时,它们将参数传递给事件处理程序,通常命名为evente,即事件本身。

e.currentTarget是指事件处理程序已附加到的元素。

document.querySelector('#foo').onclick = doSomething
document.querySelector('#bar').onclick = doSomething


function doSomething(e) {
  // log id of current target element of the click event
  console.log(e.currentTarget.id, ' was clicked')
}
<button id="foo">Foo</button>
<button id="bar">Bar</button>

或者,您也可以使用e.target来指代触发事件的元素。

答案 1 :(得分:0)

您可以创建一个带有参数的函数,具体取决于单击的按钮。因此,点击侦听器仍然具有三个不同的功能。我认为这比在DOM节点上添加一些信息(类或id)以仅用一个函数来区分您的情况要好。

因此,保留三个函数,但调用一个泛型函数来执行泛型的事情。

例如:

function commonOperation(indexInContact) {
    // make your operations based on the param(s)
}

// And one of your function that listen a click will call common 
function infoStranda() {
    commonOperation(0)
    // Do specific Stranda things if needed
}

希望有帮助:)

答案 2 :(得分:0)

您可以通过几种不同的方式来做到这一点。

如果您使用jQuery 选项3 也不错,我会实现选项1 的简单明了。

选项1:添加一个函数并将对象(自身)传递到其中

function displayInfoById(element) {
     console.log(element.value);
}
<div id="buttonParent">
    <button id="btnStranda" type="button" value="0" onclick="displayInfoById(this)">Stranda</button>
    <button id="btnFjellseter" type="button" value="1" onclick="displayInfoById(this)">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2" onclick="displayInfoById(this)">Overøye</button>
</div>

选项2:使用附加的事件处理程序获取事件currentTarget。

document.getElementById("btnStranda").onclick = displayInfo;
document.getElementById("btnOveroeye").onclick = displayInfo;
document.getElementById("btnFjellseter").onclick = displayInfo;

function displayInfo(event) {
  console.log(event.currentTarget.value)
}
<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

选项3:将类属性与jQuery事件处理程序.on('click'):

结合使用

$(".buttonClass").on('click', function(event) {
  console.log(event.target.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>