0

わかりました、ニュースの投稿と、コメントできる各投稿をループしています。そこで、ニュースの投稿ごとにダイアログモーダルを作成しました (これはばかげていると思います) が、news_id をループさせてフォームのアクション属性に渡す唯一の方法です。

とにかく、それほど大したことではないことを願っていますが、コメント リンク (.comment) をクリックするたびに、同じクラスであるため、すべての繰り返しダイアログ モーダルが開きます。ニュースIDに基づいてコメントを挿入できるように、クリックしているコメントリンクと同じニュースIDを持つダイアログモーダルのみを開くにはどうすればよいですか?

これは私のニュース ループの HTML です (CodeIgniter を使用)

<div id="news">
    <?php foreach($news_array as $news) { ?>

    <div class="news_box">
        <h3 align="right">Peanut - December 18, 2012</h3>
        <p align="right"><?php if($admin) { echo anchor('admin/news/edit/'.$news->id, 'Edit').' | '.anchor('admin/news/delete/'.$news->id, 'Delete', array('onClick' => "return confirm('Are you sure you want to delete this post?')")); } ?></p>
        <h2><?php echo $news->title; ?></h2>
        <p><?php echo nl2br($news->body); ?></p>
        <p align="right"><?php echo anchor('news/comment/'.$news->id, 'Comment', array('class' => 'comment', 'onclick' => 'return false')); ?></p>

        <div class="comment-form" title="Comment">
            <?php echo form_open('news/comment/'.$news->id, array('class' => 'form')); ?>
            <fieldset>
                <legend>Please Leave A Comment</legend>
                <div class="row clearfix">
                    <div class="full control-groups">
                        <div class="clearfix">
                            <div class="form-status"></div>
                            <?php echo form_label('Comment', 'comment'); ?>
                        </div>
                        <?php echo form_textarea(array('name' => 'comment', 'id' => $news->id, 'maxlength' => 200, 'placeholder' => 'Please enter 5 - 200 characters.', 'value' => set_value('comment'))); ?>
                    </div>
                </div>
            </fieldset>
            <? echo form_close(); ?>
        </div>

        <hr color="orange" />
    </div>
    <?php } ?>
</div>

次に、ここに私のJavascriptがあります（重要なもののみを表示しているため、すべてがごちゃ混ぜになっているわけではありません）：

$('.comment-form').dialog({
    autoOpen: false,
    height: 380,
    width: 900,
    modal: true,
    buttons: {
        "Comment": function() {
            form = $('.form');
            $.ajax({
                type: 'POST',
                url: form.attr('action'),
                data: form.serialize(),
                type: (form.attr('method'))
            });
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});
$('.comment').click(function() {
    $(this).closest('.comment').find('.comment-form').dialog('open');
});

助けてくれてありがとう！

4

2 に答える 2

0

いくつかの方法があります。私はおそらくこのようにするでしょう。id="comment-form-0"ループして PHP でコメントを作成するときに、各コメント フォームに idid="comment-form-1"などを付けます。

また、コメント要素ごとに、HTML5 データ属性を保存しdata-comment-id="0"ますdata-comment-id="1"。

次に、JavaScript で次のようにします。

$('.comment').click(function() {
    var commentId = $(this).attr('data-comment-id');
    $('#comment-form-' + commentId).dialog('open');
});
于 2012-12-20T01:57:14.023 に答える
0

親コンテナーを検索し、適切なコメント フォームを取得します。

$('.comment').click(function() {
    $(this).closest('div.news_box').find('.comment-form').dialog('open');
});

それを考えると[.closest()][1]：

  1. 現在の要素から開始
  2. 指定されたセレクターに一致するものが見つかるまで、DOM ツリーを上に移動します
  3. 返された jQuery オブジェクトには、元のセットの各要素に対してゼロまたは 1 つの要素が含まれます

div.news_boxのクラスを持ついくつかの包含要素が上にある可能性があり.commentます。上記のコード (未テスト) は、で.closest()一致を停止しdiv.news_box、 class を持つ唯一の子要素を見つける必要があるため.comment-form、1 つのダイアログのみが開きます。

于 2012-12-20T13:21:18.363 に答える