php - jquery获取点击元素的id并显示隐藏的子div

Question

我有很多评论，应该可以回答评论。

<div>
<a href="#" class="answerBtn" id="<?=$comment->id ?>">Answer</a>
    <div id="answerDiv" style="display:none;">
        <form action="" method="POST">
            <input type="hidden" value="<?=$comment->id ?>"/>
                <p>
                     <label>Your name*</label>
                <br />
                     <input type="text" name="answer_username" id="answer_username" required />
                </p>
                <p>
                    <label>Your Email (optional)</label>
                <br />
                        <input type="text" name="answer_email" />  
                </p>
                <p>
                    <label>Your comment*</label>
                <br />
                <textarea name="answer_message" required></textarea>
                </p>
                <input type="hidden" value="<?=base_url()?>" id="answer_baseurl"/>
                <input type="submit" value="Send"/>                             
                </form>
                </div>

我想在单击链接时显示表单，但是因为每个评论都有相同的表单，所以我必须具体说明，所以我想根据评论的 id 显示表单。所以我用jquery尝试了这样的事情：

$('.answerBtn').click(function(){
    var id = $(this).attr('id');
    $('id + div').slideToggle();
});

但这并没有真正的工作......

有人可以帮我吗？

Answer 1

由于div要显示的似乎是下一个兄弟，使用.next()查找元素

$('.answerBtn').click(function(){
    $(this).next().slideToggle();
});

Answer 2

以下行只关心标签 id：

$('id + div').slideToggle();

它根本不使用变量id。

相反，请使用以下内容：

$('#' + id + ' + div').slideToggle();

Answer 3

我认为更好的方法是将相同的 id 分配给包含表单的 div

<a href="#" class="answerBtn" id="<?=$comment->id ?>">Answer</a>

<div id="answerDiv_<?=$comment->id ?>" style="display:none;"> ... </div>

div然后在被点击时显示相应.answerBtn的：

$('.answerBtn').click(function(){
    var id = $(this).attr('id');
    $('div#answerDiv_'+id).slideToggle();
});

Answer 4

将评论的 id 附加到div也喜欢：

 <div id="answerDiv<?=$comment->id ?>" style="display:none;">

在脚本中，尝试

 $('.answerBtn').click(function(){
    var id = $(this).attr('id');
    $('#answerDiv'+id).slideToggle();
 });