javascript - 将html元素传递给javascript中的函数

Question

...这个问题已经被问过很多次了，但我仍然无法解决我的问题。

我有一个元素列表，动态创建，由类“box”定义，如下所示:

<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
    ....
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>

然后我希望函数“buttonFunction(element)”如下所示:

function buttonFunction(element){
    $('.element').show()  
}

其中element是具体的inputbox到具体的box div。

Answer 1

只要您使用的是 jQuery，就容易多了:

HTML:

<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>

JS(把它放在 $(document).ready(...) 里:

$('.box button').click(function(){
   $(this).next('.inputBox').show();
});

这是一个 example