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

Я внедряю систему голосования и хочу использовать 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){
        $("")
    });
});

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

РЕДАКТИРОВАТЬ:

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

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

jquery ajax css-selectors
person Community    schedule 16.06.2011    source источник
comment
что такое voteAction? и $.post требуется URL-адрес в качестве 1-го параметра   -  person Naftali aka Neal    schedule 16.06.2011
comment
Не могли бы вы дать ID элементам ‹p›? Например. ‹P id = 12321› и используйте jQuery для получения идентификатора родительского элемента типа ‹p›? Вам нужно будет где-то иметь свой постид (а).   -  person Colin    schedule 16.06.2011
comment
@Colin: проблема в том, что я не знал, как выбрать идентификатор после добавления его в элемент p.   -  person    schedule 17.06.2011

Ответы (7)


arrow_upward
0
arrow_downward

добавьте атрибут 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){
        $("")
    });
});
person Ovesh    schedule 16.06.2011
comment
Я выберу это, кажется, самое простое решение. Спасибо! - person ; 16.06.2011

arrow_upward
2
arrow_downward

Вам нужно добавить 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){
        $("")
    });
});
person js1568    schedule 16.06.2011

arrow_upward
1
arrow_downward

Сохраните сообщение в элементе с помощью атрибута 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

    ...
}
person BrunoLM    schedule 16.06.2011
comment
Но почему data-postid, это нарушает соответствие стандартам. - person roberkules; 16.06.2011
comment
Нет, это правильный HTML 5: ejohn.org/blog/html -5-data-attributes У меня вопрос, насколько хорошо это обрабатывается во всех различных браузерах. - person Daff; 16.06.2011
comment
@roberkules @Daff Работает даже в IE6 stackoverflow.com/questions/2412947/ - person BrunoLM; 16.06.2011
comment
Но все ли сейчас делают только HTML5? И да, IE6 поддерживает его - просто говоря, что он нарушает соответствие стандартам (проверка валидатором выдаст ошибку) - person roberkules; 16.06.2011

arrow_upward
0
arrow_downward

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

<p id="post-234">

</p>

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

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

arrow_upward
0
arrow_downward

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

$(this).attr('id')

Для идентификатора сообщения

person Tom Walters    schedule 16.06.2011

arrow_upward
0
arrow_downward

Я думаю, вы захотите изучить использование атрибутов данных 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){
        $("")
    });
});

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

person cs44    schedule 16.06.2011

arrow_upward
0
arrow_downward

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

<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){
        $("")
    });
});
person Trey    schedule 16.06.2011
comment
отсутствует '-' внутри вашего split() - person js1568; 16.06.2011