Какой хороший способ дифференцировать кнопки «ответить» для каждого сообщения?

Question

Я изменяю пример Flask MiniTwit, чтобы внедрить систему ответа на сообщения в виде твиттера, каждое сообщение имеет кнопку «Ответить».Я хотел бы расширить новый div для отображения ответов, а также области ввода Когда была нажата кнопка «Ответить» для указанного сообщения.но теперь я не знаю, как определить кнопку «ответить» в моем шаблоне jinja.

текущий мой код выглядит следующим образом:

<a href=# data-messageid="{{message._id}}" id="reply">
Reply
</a>

так как дифференцировать каждый «ответ»кнопка гиперссылки в моем коде jQuery?

Answer 1

Ваш текущий шаблон приведет к недействительному документу HTML (при условии, что шаблон развернут более одного раза): id значения должны быть уникальными в документе, поэтому вы не можете просто получить "ответ" "как id.

Я бы, вероятно, изменил бы "ответ" с id на class. Тогда вы можете подключить их все напрямую :

$("a.reply").click(function(event) { ... });

... или используя делегирование :

$("container_for_replies").delegate("a.reply", "click", function(event) { ... });

(Используя jQuery 1.7 и выше, вы можете использовать on вместо delegate; обратите внимание, что порядок аргументов отличается.)

В вашем обработчике событий this будет ссылаться на конкретный элемент a, по которому щелкнули, поэтому вы можете (например) получить свой атрибут data-messageid следующим образом:

var messageid = $(this).attr("data-messageid");

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

Answer 2

Прежде всего, поскольку кнопка «Ответить» появляется с каждым сообщением, не используйте id="reply".class="reply" будет лучше.

И я думаю, это то, что вы хотите:

<a href=# data-messageid="1" class="reply">Reply</a>
<a href=# data-messageid="2" class="reply">Reply</a>
<script type="text/javascript">
    $().ready(function () {
        $('.reply').click(function (argument) {
            alert($(this).attr('data-messageid'));
        });
    });
</script>

Answer 3

<div class="replymessage" id="message{{message._id}}">content</div>
<a href="#message{{message._id}}" class="reply">Reply</a>


$('.reply').click( function () {
    var item =  $(this).attr('href');
    $(item).slideToggle(300);
 });

Демо Здесь

Как правило, вы используете динамический идентификатор в href кнопки, а затем в ID для соответствующего div. Таким образом, когда вы нажимаете на ссылку с href, открывается div с тем же идентификатором.