Поле комментариев JQuery, похожее на Stackoverflow?

Question

Некоторое время назад я спросил, как сделать складное поле для комментариев, например, Stackoverflow

Оригинальный вопрос найден здесь

Однако с тех пор я столкнулся с другой проблемой, в которой я не совсем уверен, как идти к решению, я почти уверен, что я делаю это так же, как исходный вопрос, но не совсем уверен в синтаксисе.

По сути, моя проблема в том, что я добавил функцию для ограничения количества символов, которые пользователь вводит в комментарий, и я показываю оставшиеся символы.

Однако, поскольку в списке может быть много окон для комментариев, сценарий выполняется только для первого в списке, и мне нужно быть динамичным.

Другими словами, так же как и ссылки, открывающие окно комментария в моем исходном вопросе, у каждого есть уникальный идентификатор.

Как мне сделать то же самое для скрипта, который контролирует ввод символов.

$(function(){
    $('#comment').keyup(function(){
        limitChars('comment', 255, 'charlimitinfo');
    })
});

Обновление: Я сделал их динамичными, выполнив что-то вроде этого

$(function(){

    $('.comment-<%=ViewData.Model.Entry.EntryID %>').keyup(function(){
        limitChars('comment-<%=ViewData.Model.Entry.EntryID %>', 255, 'charlimitinfo');
    })
});

Однако, когда вы открываете одно, а затем открываете другое, второй получает контроль ...

Answer 1

На мой взгляд, ваши поля для комментариев добавляются динамически. Проблема в том, что, поскольку у вас есть кратные, которые не будут работать, потому что идентификатор уникален , поэтому он применяется только к одному, поэтому вместо выбора их по идентификатору, как у вас, вы можете просто установить класс как «комментарий» в тегах управления и выберите их таким образом. например:

  $(function(){
   $('.comment').keyup(function(){
    limitChars('comment', 255, 'charlimitinfo');
   })
});

пример вашего текстового тега:

  <textarea cols="20" rows="10" class="comment"></textarea>

Редактировать Способ, с помощью которого вы можете работать, - это оставить свой jquery таким, каким он является для условия, но каждый тег должен иметь уникальное имя, либо добавить что-то в класс, чтобы сделать его уникальным , но, таким образом, jquery все равно будет знать, что он попадает в ветку селектора, или добавлять разные номера к каждому тегу id

Answer 2

Ваш селектор должен относиться к классу css $ (". Comment"), а не к идентификатору $ ("# comment").

Answer 3

Вы заметите, что SO использует уникальные идентификаторы в такой форме:

<form class="post-comments" id="form-comments-459429">

.. Я использую аналогичный подход в созданном мной элементе управления загрузкой. Я могу многократно отображать элемент управления загрузкой на странице и выводить его через ajax из частичного представления - каждый раз, когда создается представление, форме присваивается уникальный идентификатор, и сценарий jQuery поставляется вместе с ним, так что в вашем случае это может выглядеть так:

$('#comment-1234')

.. таким образом, каждый скрипт jQuery применяется только к конкретной форме, к которой он «прикреплен».

Answer 4

Я на самом деле исправил свою проблему ...

Проблема в том, что он не работал должным образом, когда открылось второе окно комментария, - я забыл назначить уникальный идентификатор, который обновляется по мере ввода текста с оставшимся количеством символов.

<script language="javascript">
function limitChars(textid, limit, infodiv)
{
    var text = $('.'+textid).val(); 
    var textlength = text.length;
    if(textlength > limit)
    {
        $('#' + infodiv).html('You cannot write more then '+limit+' characters!');
        $('#'+textid).val(text.substr(0,limit));
        return false;
    }
    else
    {
        $('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
        return true;
    }
}

$(function(){

    $('.comment-<%=ViewData.Model.Entry.EntryID %>').keyup(function(){
        limitChars('comment-<%=ViewData.Model.Entry.EntryID %>', 255, 'charlimitinfo-<%=ViewData.Model.Entry.EntryID %>');
    })
});