单击不同的链接时显示不同的表单

Question

我有一个这样的 Drupal html：

<div class="field field-name-js-link field-type-ds field-label-hidden">
    <div class="field-items">
        <div class="field-item even">Enlace Responder</div>
    </div>
</div>
<div id="comments" class="comment-wrapper">
    <form class="comment-form ds-1col " action="/drupal7/felgtb-vih/httpdocs/comment/reply/39" method="post" **id="comment-form"** accept-charset="UTF-8" style="display: block;"><div><div class="ds-1col ds-form clearfix">

    </form>
</div>
<div class="field field-name-js-link field-type-ds field-label-hidden">
    <div class="field-items">
        <div class="field-item even">Enlace Responder</div>
</div>
</div>
<div id="comments" class="comment-wrapper">
    <form class="comment-form ds-1col " action="/drupal7/felgtb-vih/httpdocs/comment/reply/39" method="post" id="comment-form--2" accept-charset="UTF-8" style="display: block;"><div><div class="ds-1col ds-form clearfix">

    </form>
</div>
<div class="field field-name-js-link field-type-ds field-label-hidden">
    <div class="field-items">
        <div class="field-item even">Enlace Responder</div>
    </div>
</div>
<div id="comments" class="comment-wrapper">
    <form class="comment-form ds-1col " action="/drupal7/felgtb-vih/httpdocs/comment/reply/39" method="post" id="comment-form--3" accept-charset="UTF-8" style="display: block;"><div><div class="ds-1col ds-form clearfix">

    </form>
</div>

我需要当我用class="field-name-js-link"点击<div>时，页面会显示一个与这个<div>相关的表单（下面出现的表单）。 例如，如果我用class="field-name-js-link"点击第一个<div>，它必须显示第一个“表单”；如果我用class="field-name-js-link"点击第二个<div>，它必须显示第二个“表单”，等等。

所有这些都使用 javascript 或 jquery。

谢谢！

Answer 1

这将使评论字段在您第一次点击时可见，以后再切换。

$(function () {
    $(".field-name-js-link").click(function () {
        var visible = $(this).next(".comment-wrapper").is(":visible");
        $(".comment-wrapper").hide(); // hide all the other forms
        $(this).next(".comment-wrapper").toggle(!visible); // toggle the form below this
    });
});

DEMO