0

我有一组表单，基本上是一个多回复框，当我试图获取每个回复表单的值然后将其附加到每个表单块下的容器时，我能够获取每个表单的值然后克隆它，并将其附加到容器中，但问题是我的脚本没有将值附加到每个块，基本上只附加到第一个块，我创建了一个http://jsfiddle.net/creativestudio/NgEpS/

这是我的html：1 

        <div class="post-container">
            <form class="reply-form">
                <div class="reply-box">
                    <textarea placeholder="Reply box 2..." columns="10" rows="1" name="comment-input"></textarea>
                    <input type="submit" value="Send">
                </div>
                <div class="post-dropdown"></div>
                <div class="post-dropdown-content">
                    <div class="post-dropdown-reply hidden"></div>
                </div>
            </form>
        </div>

        <div class="post-container">
            <form class="reply-form">
                <div class="reply-box">
                    <textarea placeholder="Reply box 3..." columns="10" rows="1" name="comment-input"></textarea>
                    <input type="submit" value="Send">
                </div>
                <div class="post-dropdown"></div>
                <div class="post-dropdown-content">
                    <div class="post-dropdown-reply">1</div>
                    <div class="post-dropdown-reply">2</div>
                    <div class="post-dropdown-reply">3</div>
                    <div class="post-dropdown-reply">4</div>
                </div>
            </form>
        </div>
        ​

这是我的js：

        function gettingReplyVal() {

            $('.reply-form').submit(function(e) {
                var post_clone =    $('.post-dropdown-content').first().clone();

                var textAreaValue = $(this).find('textarea').val();

                $(post_clone).insertBefore(".post-dropdown-content:first").find('.post-dropdown-reply').html(textAreaValue);

                e.preventDefault();

            });
        }

        gettingReplyVal();
4

2 回答 2

0

看看这个：http: //jsfiddle.net/NgEpS/1/

更改在此行：

 $(post_clone).insertBefore($(this).find(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);

我将其更改为使用 $(this) 上下文查找 .post-dropdown-content div。你在页面上找到了第一个。

于 2012-11-28T21:22:46.940 回答
0

我想你想要这样的东西：

// Find the text that was entered
var textAreaValue = $(this).find('textarea').val();

// Make a new post div, and add the appropriate classes
post = $("<div>").addClass("post-dropdown-reply");

// Set its html
post.html(textAreaValue);

// Add it onto the content list
$(this).find('.post-dropdown-content').prepend(post);

这样做的缺点是您必须从头开始生成一个新的帖子 div，但它的效果要好得多。（见jsfiddle）

于 2012-11-29T00:11:28.010 回答