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

我会搜索父容器，然后获取适当的评论表单：

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

鉴于[.closest()][1]：

  1. 从当前元素开始
  2. 向上移动 DOM 树，直到找到匹配的选择器
  3. 返回的 jQuery 对象包含原始集合中每个元素的零个或一个元素

您可能在上面有一些包含元素，div.news_box其类为.comment. 上面的代码（未经测试）应该停止.closest()匹配，div.news_box然后找到唯一的带有 class 的子元素.comment-form，因此只打开一个对话框。

于 2012-12-20T13:21:18.363 回答
0

There's a few ways you can do it. I'd probably just do it like this. Give each comment form an id e.g. id="comment-form-0", id="comment-form-1" etc as you're looping through and creating them in PHP.

Also for each comment element you store an HTML5 data attribute on it e.g. data-comment-id="0", data-comment-id="1".

Then in the JavaScript you'd do something like:

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