jQuery对话框模态（仅在页面上有多个页面时打开）

好吧我正在循环播放我的新闻发布以及您可以评论的每个新闻发布。所以我为每个新闻发布（我认为很愚蠢）构建了一个对话框模式，但这是我能够保持news_id循环并将其传递给表单动作属性的唯一方法。jQuery对话框模态（仅在页面上有多个页面时打开）

无论如何，希望这不是一个很大的交易，但每当我点击注释链接（.comment）时，它会打开所有重复对话模式，因为它是同一个类。我如何才能让它只打开对话框模式与他们点击的评论链接具有相同的新闻ID，以便我可以根据新闻ID插入他们的评论？

这是我的消息的HTML循环（使用笨）

<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'); 
});

谢谢你的任何帮助！

来源

2012-12-20 Peanut

有几种方法可以做到这一点。我可能会这样做。给每个评论表单一个id，例如id="comment-form-0"，id="comment-form-1"等，因为你正在循环并在PHP中创建它们。

对于每个注释元素，您还在其上存储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-20 01:57:14 zuallauz

我不能在评论表单框上放一个随机数，因为它们是对话框并放在display：none;从autoOpen属性设置为false，所以没有PHP会继续，因为它的行为就好像它们不在那里一样..我已经尝试了很多次。 – Peanut

加上我将不得不为每个新闻ID创建一个ID对话模式，我不知道会有多少。可能有2个，可能有10个，甚至更多..我只是要让它滑下来，而不是一个对话模式。 – Peanut

@Pananut如何在JSFiddle上放置一个简化的测试用例（基本html，js，css），供人们尝试和测试。 – zuallauz

我会寻找父容器，然后抓住适当的注释形式：

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

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

开始使用当前元素
向上行进DOM树，直到它找到所供给的选择器
返回jQuery对象包含零个或以上div.news_box具有在原始集合

您可能有一些含元素各元素的一个元素匹配一类.comment。上述代码（未经测试）应该在div.news_box处停止.closest()匹配，然后找到类.comment-form的唯一子元素，从而只打开一个对话框。

来源

2012-12-20 13:21:18 pete

您的代码无法正常工作..我将news_box放入了一个.comment类的div中，并且它不起作用。 – Peanut

@Peanut：没有必要将div.news_box包装在div中。评论“，尽管我在我的回答中看到了你可能已经解释过的地方。为了更清晰起见，我重新回答了我的答案。如果我的答案仍然无法工作，请尝试使用'.parents（）'而不是'.closest（）'。如果仍然失败，请张贴一些呈现的HTML（在PHP呈现给浏览器之后）。 – pete

jQuery对话框模态（仅在页面上有多个页面时打开）

回答

相关问题