2

我遇到了一些问题，无法解决，因为我无法解决这个问题。真是个大问题。我想为每个帖子动态附加一个字符限制和一个提交评论按钮，并且每个commentArea 都是它自己的一种形式。欢迎任何帮助，我想让它充满活力，彼此独立。

谢谢！

   $(".comment-box").keyup(function(){
        var text_max = 140;
        var length_reached = $(this).val().length;
        var remaining = text_max - length_reached;
        $('.counter').html(remaining);

        if(remaining < 5 || remaining > text_max)
           $(".btn").prop("disabled", true);
        else
           $(".btn").prop("disabled", false);
    });

这是我的 jsfiddle：http: //jsfiddle.net/3sCfG/25/

编辑：尝试制作类似于 Twitter 的回复部分的内容，该部分附在其时间轴上的每个微博上，但不确定是否应该使用 ID，在 Twitter 上找到了 ID，但并不完全清楚。我正在尝试制作一个与 Twitter 类似的评论框。

4

3 回答 3

3

看看这里：http: //jsfiddle.net/3sCfG/38/

代码

$(".comment-box").keyup(function () {
    var parent = $(this).parent();
    var text_max = 140;
    var length_reached = $(this).val().length;
    var remaining = text_max - length_reached;

    $(parent).find('.counter').html(remaining);

    if (remaining < 5 || remaining >= text_max)
        $(parent).find(".btn").prop("disabled", true);
    else
        $(parent).find(".btn").prop("disabled", false);
    });

希望能帮助到你

编辑清理了一些代码

于 2013-06-04T09:56:23.240 回答
2

您的问题是使用类（因此影响多个元素）而没有指定您要更新的 DOM 的哪一部分。

最简单的解决方案是向处理程序中的选择器添加“搜索上下文”。

我已用作$(selector, parent)以下的简写$(parent).find(selector)：

$(".comment-box").keyup(function() {

    var parent = this.parentNode;  // new
    var text_max = 140;
    var length_reached = this.value.length;
    var remaining = text_max - length_reached;

    $('.counter', parent).html(remaining);
    $('.btn', parent).prop('disabled', (remaining < 5 || remaining >= text_max));
});

我还重构了.prop调用，因为：

if (condition) {
    .prop('disabled', true);
} else {
    .prop('disabled', false);
}

完全等同于：

.prop('disabled', condition);

我将其更改> text_max为>= text_max，因为我认为如果没有输入，则意图是禁用“提交”按钮。

见http://jsfiddle.net/alnitak/ATW9u/

于 2013-06-04T10:05:39.933 回答
0

  • 也许data-向文本区域添加一个属性并使用它来设置最大长度？

    <textarea class="comment-box" type="text" data-limit="10" placeholder="Write a comment"><textarea>

  • 除此之外，不要使用其类来引用计数器，而是导航到它并减少编号。的字符。（像这样）

    $(this).next(".tools").find("span").html(remaining);

给出textareas你想给他们的独立性。这是您更新的小提琴：http: //jsfiddle.net/3sCfG/28/

于 2013-06-04T09:59:38.107 回答