2015-06-22 2 views
1

Я это JQuery AJAX Нравится Не нравится сценарийКак Неприязнь функция AJAX

<script> 
$(function(){ 
    var PostID = <?php echo $PostID; ?>; 

    $('.like-btn').click(function(){ 
     $('.dislike-btn').removeClass('dislike-h');  
     $(this).addClass('like-h'); 
     $.ajax({ 
      type:"POST", 
      url:"rate.php", 
      data:'Action=LIKE&PostID='+PostID, 
      success: function(){ 
      } 
     }); 
    }); 
    $('.dislike-btn').click(function(){ 
     $('.like-btn').removeClass('like-h'); 
     $(this).addClass('dislike-h'); 
     $.ajax({ 
      type:"POST", 
      url:"rate.php", 
      data:'Action=DISLIKE&PostID='+PostID, 
      success: function(){ 
      } 
     }); 
    }); 
}); 
</script> 

Теперь я хочу, чтобы преобразовать этот сценарий мульти поста Как нелюбовь системы. Как я могу это сделать? HTML будет выглядеть следующим образом:

<a href="#" onclick="RateSystem(LIKE, 1)">Like</a> 
<a href="#" onclick="RateSystem(DISLIKE, 1)">Dislike</a> 

LIKE/НРАВИТСЯ будет действие, 1 будет идентификатор поста нравится/не нравится. Благодаря

+0

Это выглядит нормально. Что вы подразумеваете под «multi post»? – pid

+0

Этот сценарий предназначен для одного сообщения на странице, но я хочу, чтобы его можно было разместить на одной странице. Для этого нужна функция, но я полный noob с JavaScript, jQery ... –

ответ

2

вы можете сделать что-то вроде этого. Каждый пост - это каждый div с postId и два элемента управления внутри (например, кнопки и неприятия). Когда вы нажимаете like - функция получит сообщение id и отправляет сообщение на сервер. Вы должны проверить ajax часть функции.

$(function() { 
    $('.like').click(function() { likeFunction(this); }); 
    $('.dislike').click(function() { dislikeFunction(this);}); 
}); 


function likeFunction(caller) { 
    var postId = caller.parentElement.getAttribute('postid'); 
    $.ajax({ 
     type: "POST", 
     url: "rate.php", 
     data: 'Action=LIKE&PostID=' + postId, 
     success: function() {} 
    }); 
} 
function dislikeFunction(caller) { 
    var postId = caller.parentElement.getAttribute('postid'); 
    $.ajax({ 
     type: "POST", 
     url: "rate.php", 
     data: 'Action=DISLIKE&PostID=' + postId, 
     success: function() {} 
    }); 
} 
<div class="post" postid="10"> 
    <input type="button" class='like' value="LikeButton" /> </input> 
    <input type="button" class='dislike' value="DislikeButton"> </input> 
</div> 

Если у вас есть какие-то вопросы или нужна дополнительная помощь, вы можете спросить меня :)

1

Если вы хотите больше, чем один пост на каждой странице вы можете это сделать:

function send(action, id) 
{ 
    var opposite; 

    opposite = action === 'like' ? 'dislike' : 'like'; 

    $('#' + opposite + '-' + id).removeClass(opposite + '-h'); 
    $('#' + action + '-' + id).addClass(action + '-h'); 

    $.ajax({ 
     type:"POST", 
     url:"rate.php", 
     data:'Action=' + action + '&PostID=' + id, 
     success: function(){ 
     } 
    }); 
} 

Теперь вам нужно только прикрепить обработчики правильно ($PostID должны быть различными для каждого поста в цикле):

<a href="#" 
    id="like-<?php echo $PostID; ?>" 
    onclick="send('like', <?php echo $PostID; ?>)">Like</a> 
<a href="#" 
    id="disloke-"<?php echo $PostID; ?>" 
    onclick="send('dislike', <?php echo $PostID; ?>)">Dislike</a> 

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

Смежные вопросы