2

...これは何度も尋ねられていますが、まだ問題を解決できません。

次のように、クラス「ボックス」で定義された、動的に作成された要素のリストがあります。

<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()  
}

要素は、特定のボックス 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 に答える