Функция JQuery для отдельных Div - PullRequest
Новая
       4

Функция JQuery для отдельных Div

1 голос
/ 23 ноября 2010

Я думал, что этого можно добиться с помощью функции .prev(), но по какой-то причине она не работает.

Я создаю большие пальцы вверх / вниз для сообщений в блоге. Я пытаюсь отобразить сообщения в соответствии с тем, что пользователь голосует. Либо ВВЕРХ или ВНИЗ, но всякий раз, когда я голосую за один конкретный пост, сообщение появляется для всех постов.

Это мой код. Я удалил prev () попытки сделать его более читабельным. Скрипт отлично работает в ajax. 

$(document).ready(function() {
    $(".vote_button").click(function(e) { //the UP or DOWN vote button
    var vote_status = $(this).attr('class').split(' ')[1]; //gets second class name following vote_button
    var vote_post_id = $(this).attr("id"); //the post ID
    var dataString = 'post_id=' + vote_post_id + '&vote_status=' + vote_status;

    $.ajax({
        type: "POST",
        url: "url/add_vote.php",
        data: dataString,
        cache: false,
        success: function(html) {
            if (vote_status == 1) 
         {
                $('.msg_box').fadeIn(200);
                $('.msg_box').text('You voted UP!');
            }
            if (vote_status == 2) 
         {
                $('.msg_box').fadeIn(200);
                $('.msg_box').text('You voted DOWN!');
            }
        }
    });
    return false;
});
});

Пример HTML 

<div class="vote_button 1" id="18">UP</div>
<div class="vote_button 2" id="77">DOWN</div>
<div class="msg_box"></div>

<div class="vote_button 1" id="43">UP</div>
<div class="vote_button 2" id="15">DOWN</div>
<div class="msg_box"></div>


<div class="vote_button 1" id="11">UP</div>
<div class="vote_button 2" id="78">DOWN</div>
<div class="msg_box"></div>

РЕДАКТИРОВАТЬ: предоставляется jsfiddle без Ajax-части http://jsfiddle.net/XJeXw/

1 Ответ

5 голосов
/ 23 ноября 2010

Вам необходимо сохранить ссылку на кнопку внутри обработчика click (например, var me = $(this);), затем использовать me.nextAll('.msg_box:first') внутри обработчика AJAX.

РЕДАКТИРОВАТЬ : Пример : 

var me = $(this);   //The this will be different inside the AJAX callback

$.ajax({
    type: "POST",
    url: "url/add_vote.php",
    data: dataString,
    cache: false,
    success: function(html) {
        me.nextAll('.msg_box:first')
            .text(vote_status == 1 ? 'You voted UP!' : 'You voted DOWN!')
            .fadeIn(200);
    }
});
...