Question

点击＆＃34;回复＆＃34;后，我试图动态添加div我只能重复一次div。

我想在每个div之后添加该div，但它只适用于第一个。{

这是我的代码：

＆＃13;

$(function () {
  $(".repetable").hide();
  $(".reply").bind("click", function () {
    $(".repetable").hide();
    $(".repetable").slideDown("slow")
    $("#nazar").slideUp("slow");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <!--div 1-->
    <div class="comment1">
        <p>YOUR COMMENT</p>
        <div class="reply">
            reply
        </div>
    </div>
    <!--End div 1-->
    <div class="repetable">
        <form class="formnazar-user">
            <input type="text" />
        </form>
    </div>
    <!--div 2-->
    <div class="comment1">
        <p>YOUR COMMENT2</p>
        <div class="reply">
            reply
        </div>
    </div>
    <!--End div 2-->
    <div class="repetable">
        <form class="formnazar-user">
            <input type="text" />
        </form>
    </div>
</div>

＆＃13;

Answer 1

如果我正确理解了问题，请在.reply点击两个.repetable后执行slidedown()动画。

因此，您只需要在评论之后的.repetable上执行此操作。因此，您需要使用parents()函数

获取当前匹配元素集中每个元素的祖先，可选择通过选择器进行过滤。

像这样：

$(function () {
  $(".repetable").hide();
  $(".reply").bind("click", function () {
    // $(".repetable").hide(); - You don't need it
    // You want to do this only for the next div after the sepecific comment
    $(this).parents('.comment1').next().slideDown("slow");
    //$(".repetable").slideDown("slow")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <!--div 1-->
    <div class="comment1">
        <p>YOUR COMMENT</p>
        <div class="reply">
            reply
        </div>
    </div>
    <!--End div 1-->
    <div class="repetable">
        <form class="formnazar-user">
            <input type="text" />
        </form>
    </div>
    <!--div 2-->
    <div class="comment1">
        <p>YOUR COMMENT2</p>
        <div class="reply">
            reply
        </div>
    </div>
    <!--End div 2-->
    <div class="repetable">
        <form class="formnazar-user">
            <input type="text" />
        </form>
    </div>
</div>

Answer 2

这里的问题是你选择同一个班级。所有“可重复”的div都会受到

的影响

$(".repetable").hide();
    $(".repetable").slideDown("slow")

要解决此问题，您可以使HTML看起来更像这样。请注意，重播输入位于实际所属的注释内。（或者您可以使用不同的父级将注释div与注释重放输入分组）

<div class="main">
    <!--div 1-->
    <div class="comment">
        <p>YOUR COMMENT</p>
        <div class="reply">
            reply
        </div>
        <div class="repetable">
            <form class="formnazar-user">
                <input type="textbox" />
            </form>
        </div>
    </div>
    <!--End div 1-->


    <!--div 2-->
    <div class="comment">
        <p>YOUR COMMENT2</p>
        <div class="reply">
            reply
        </div>
        <div class="repetable">
            <form class="formnazar-user">
                <input type="textbox" />
            </form>
        </div>
    </div>
    <!--End div 2-->

</div>

之后，你可以使用这样的js事件处理程序来动态选择与用户刚刚点击的重放按钮相关的重放输入：

$(".repetable").hide();
          $(".reply").bind("click", function(e) {
            var target = $(e.target);
            var targetRepeatable = target.parents('.comment').find('.repetable');
            targetRepeatable.hide();
            targetRepeatable.slideDown("slow")
            $("#nazar").slideUp("slow");
          });

您可以在此处看到它：https://jsfiddle.net/hm1zxy5b/

由于

如何在每个元素后动态添加特定的div

2 个答案: