0

Помогите кто в теме.

Задача типичная. Вывожу некие посты, у каждого - свой рейтинг, который хочу менять по клику и возвращать новое значение. Грубо говоря, имею:

<?php
    foreach($posts as $post){
        <p>$post->name</p>
        <a href='#' id='up'>+</a>
        <div id='result'>$post->raiting</div>
        <a href='#' id='up'>-</a>
    }
?>

<script>
        $(document).ready(function(){
            $('.up').click(function(){
                $.ajax({
                    type: 'get',
                    url: '/raiting/up',
                    success: function(currait){
                        $("#results").html(currait);
                    }
                });
                return false;
            });
            $('.down').click(function(){
                $.ajax({
                    type: 'get',
                    url: '/raiting/down',
                    success: function(currait){
                        $("#results").html(currait);
                    }
                });
                return false;
            });
        });
    </script>

С одним постом все понятно, все работает. Но если вывожу много записей, сталкиваюсь с проблемой, когда по нажатию на кнопку рейтинга у любого поста, скрипт берет только первую запись. Как объяснить скрипту, что у меня много записей, как передать ему id поста и главное! как вернуть значение в нужный id='result'? Спасибо.

3 ответа 3

0

1 У вас не точность в примере:

<a href='' id='up'>  // задан ID элемента
$('.up').click(function(){   // обрабатывается класс

Может так:

php:
<a href='#' class='up' id='up_$post->id' data-id='$post->id'>+</a>
<div  class='result' id='res_$post->id' data-id='$post->id'></div>

JS:
$('.up').click(function(e){
   var post_id = $(this).attr('data-id');
   $.get('/raiting/up?id='+post_id, function(currait){
     $(".results#res_"+post_id).html(currait);
   });
});
3
  • 1
    А никого не смущает что в выводе PHP вставляется прямо в HTML без каких-либо опознавательных знаков? Так, как вопрос :)
    – user31688
    3 мар 2015 в 20:51
  • я думаю, что тут человек нам показал прототип на псевдокоде. то-есть его смущал идеологический момент, а не syntaxError. А может он знает что-то, чего не знаем мы...
    – Борис
    3 мар 2015 в 21:39
  • Разумеется, я упростил код, но, похоже, только запутал некоторых:)
    – pavlike
    4 мар 2015 в 9:33
0

Ты не правильно сделал HTML разметку.

<?php foreach($posts as $post) : ?>
        <p><?php print $post->name ?></p>
        <a href="#" class="up">+</a>
        <div id="results"><?php print $post->raiting ?></div>
        <a href="#" class="down">-</a>
<?php endforeach; ?>

id = на странице может быть только один, класс применяется к однотипным элементам.

-1

Нужен раппер и поиск в нём.

$(function(){
    $('.raitingUp').on('click', function(){
        var el = $(this);
        $.post({
            url: '/raiting/up',
            id: el.parent().data('idPost'),
            success: function(num){
                el.parent().find('.raitingCount').text(num);
            }
        });
    });
    $('.raitingDown').on('click', function(){
        var el = $(this);
        $.post({
            url: '/raiting/down',
            id: el.parent().data('idPost'),
            success: function(num){
                el.parent().find('.raitingCount').text(num);
            }
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='wrapperPost' data-id-post='1'>
  <div class='post'>First post here...</div>
  <input type='button' class='raitingUp' value='+' />
  <span class='raitingCount'>1222</span>
  <input type='button' class='raitingDown' value='-' />
</div>
<hr />
<div class='wrapperPost' data-id-post='2'>
  <div class='post'>Second post here...</div>
  <input type='button' class='raitingUp' value='+' />
  <span class='raitingCount'>5</span>
  <input type='button' class='raitingDown' value='-' />
</div>
<hr />
<div class='wrapperPost' data-id-post='3'>
    <div class='post'>Et cetĕra...</div>
  <input type='button' class='raitingUp' value='+' />
  <span class='raitingCount'>2</span>
  <input type='button' class='raitingDown' value='-' />
</div>

jsfiddle.net/g8protmv/1/

P. S. Писал на коленке, не проверил, так что пару ошибок ты можешь словить, но смысл я донёс. Надеюсь.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.