1

javascript コールバックと対話する html クラス属性について質問があります。

テーブルがあり、各行に次のようなボタンがあるとします。

<table border="0">
<?php foreach ($itemlist as $item => $value): ?>
    <tr>
        <td><?php echo $item;?></td>
        <td><button class="create-user">Test</button></td>
    </tr>
<?php endforeach; ?>
</table>

ボタンには「create-user」というクラス属性があることに注意してください。これで、各ボタンに同じコールバックを追加したいと思います。

var btn = document.getElementsByClassName("create-user");
btn.click(function() {
    $("#dialog-form").dialog("open");
});

ダイアログフォームが開くと思っていましたが、応答がありません。クラス属性をJavaScriptで扱うのは初めてです。

誰かが私に光を当てることができますか?

ありがとう！

4

4 に答える 4

4

getElementsByClassName配列のようなコレクション (技術的には ) を返しますnodeList。要素にイベント ハンドラーを追加するには、それらをループする必要があります。

var buttons = document.getElementsByClassName("create-user");
var count = buttons.length;

while ( count-- ) {
    buttons[ count ].onclick = function () {
        $("#dialog-form").dialog("open");
    };
}

ただし、jQuery を使用しているため、jQuery を使用して要素を選択する必要があります。明示的なループは必要ありません。

$(".create-user").click(function() {
    $("#dialog-form").dialog("open");
});

PSパフォーマンスを向上させるために、セレクターをキャッシュすることを忘れないでください。

var $dialog = $("#dialog-form");
$(".create-user").click(function() {
    $dialog.dialog("open");
});
于 2013-01-08T19:14:46.500 に答える
0

runningdocument.getElementsByClassName("create-user");は配列のような NodeList オブジェクトを返します。代わりに、次を試してください。

var btn = $('.create-user');

次にbtn、clickメソッドがあります（jQueryを使用していると仮定します）。

また、Firebug または Web 開発者コンソールを試して、JavaScript エラーに関する情報を確認してください。

于 2013-01-08T19:16:39.300 に答える
0

通常の JavaScript と jQuery を混同しているようです。実際にjQueryを使用していることを考えると、 with に置き換えるvar btn = document.getElementsByClassName("create-user");とうまくいくはずです。var btn = $(".create-user");

于 2013-01-08T19:14:48.173 に答える
0

これには jQuery が最適です: http://www.jquery.com

jQuery をダウンロードして、これをファイルに含めます。

次に、コードは次のようになります。

<script type="text/javascript">
   //When document loads add to all create-user buttons
   $(document).ready(function(){
     $(".create-user").click(function() {
        $("#dialog-form").dialog("open");
     });
   });
</script>
于 2013-01-08T19:18:11.417 に答える