Определить конкретный элемент с помощью jQuery

Question

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

Мой HTML выглядит так:

<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

(пожалуйста, игнорируйте несколько тегов span)

Это код JS, который у меня сейчас есть:

$(".voteUp").click(function(){
    $.post(voteAction({postid: '5', type: 'up'}), function(data){
        $("")
    });
});

Итак, как мне определить, для какого поста предназначен клик (и заменить жестко запрограммированный постид выбранным идентификатором?) Я мог бы добавить постидий с ${post.id} где-нибудь в html, но я не вижу, как именно используй это. Я не могу позволить себе создавать собственные функции jQuery .click для каждого сообщения, верно?

EDIT:

Есть идеи, как впоследствии обновить содержимое тегов span? Я пробовал это, но это не работает:

$.post(voteAction({postid: this.id, type: 'up'}), function(data){
    $(".voteUp a span").html(data);
});

Answer 1

Вам нужно добавить postid где-нибудь в вашем шаблоне. Неважно, где вы можете получить его каждый раз.

Пример:

<p>
post #2 content
<span><a href="#" class="voteUp" rel="${post.id}">I approve this message <span>${post.upvotes}</span></a></span>
</p>

$(".voteUp").click(function(){
    $.post(voteAction({postid: $(this).attr('rel'), type: 'up'}), function(data){
        $("")
    });
});

Answer 2

Сохраните postid на элементе, используя атрибут data-, например,

<p data-postid="5">
    <a href="#" class="voteUp">
</p>

Затем при вашем событии клика:

$(".voteUp").click(function(){
    var $postBlock = $(this).closest("p"); // gets the post block

    var postid = $postBlock.data("postid"); // 5

    ...
}

Answer 3

Я думаю, вы захотите исследовать, используя атрибуты данных html5.

Например, ваш html может стать:

<a href="#" class="voteUp" data-post-id="5">I approve....</a>

Хотя ваш JS будет читать:

$(".voteUp").click(function(){
    $.post(voteAction({postid: $(this).data("post-id"), type: 'up'}), function(data){
        $("")
    });
});

Хотя это не самый лучший доступный документ, это должно

Answer 4

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

$(this).attr('id')

Для сообщения ID

Answer 5

Добавьте идентификатор в оболочку сообщения вместе с определенным классом, т. Е.

<div class="post-votable" id="post-5">
<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

затем

$(".voteUp").click(function(){
    $.post(voteAction({postid: $('this').closest('.post-votable')[0].id.split('-')[1], type: 'up'}), function(data){
        $("")
    });
});

Answer 6

вы можете сохранить идентификатор в окружающем теге p

<p id="post-234">

</p>

и извлеките его оттуда, например, JQuery

$(this).closest("p").attr("id").split("-")[1] --> the ID

Answer 7

добавить атрибут id для каждого элемента ссылки:

<p>
post content
<span><a href="#" class="voteUp" id="1">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp" id="2">I approve this message <span>${post.upvotes}</span></a></span>
</p>

ссылка на элемент в коде JS:

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $("")
    });
});