2

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

我有一个由“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 是特定框 div 的特定输入框。

4

2 回答 2

2

只要您使用 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();
});

这是一个例子

于 2013-01-23T19:43:23.587 回答
2

有很多方法可以处理这种情况。通常使用 html 在元素上放置点击事件不是最佳实践。这是一个适合您的示例的强类型解决方案。它将被点击的元素（按钮元素）传递给函数。然后，编写的函数将找到最接近类的元素并向其inputBox发出 jquery show()。

html

<button onclick="buttonFunction(this)"></button>

js

function buttonFunction(el){
 $(el).parent().find('.inputBox').show();  
}
于 2013-01-23T19:44:04.410 回答