Skrypt jQuery tylko w jednym elemencie

pytanie zadane 18 października 2016 w JavaScript przez Captivity Obywatel (1,030 p.)

Witam, dopiero zaczynam z jQuery, więc pytanie może wydawać się banalne.

Mam stronę z obrazkami, które wyświetlają się poprzez pętlę for.

Pod każdym obrazkiem jest przycisk "mocne" wraz z oceną wysyłaną/pobieraną do bazy danych.

Napisałem skrypt, który
- po kliknięciu "mocne" wysyła do kontrolera prośbę o podniesienie oceny,
- odbiera od kontrolera aktualną ocenę obrazka,
- podmienia w widoku ocenę, na tę, którą dostaje od kontrolera
- wyświetla pod oceną napis "dzięki"

Skrypt działa tak sobie. To znaczy: po kliknięciu wyświetla aktualną ocenę, ale... jednego obrazka przy ocenie każdego innego obrazka.

Klikam "mocne" przy jednym, a przy każdym obrazku wyświetla się ocena tego, przy którym kliknąłem.

I drugi błąd:
napis "dzięki" wyświetla się tylko przy pierwszym obrazku, pomimo, że kliknąłem "mocne" przy obrazku trzecim w kolejności, to napis pokazuje się przy tym pierwszym.

oto skrypt:

<script>
            $(document).ready(function () {
                
                $('body').on('click', '.voteUp', function (e) {
                    e.preventDefault();

                    var $btn = $(this);
                    var replaceUrl = $btn.attr('href');
                    var $vote = $('.badge');
                    
                    $.getJSON(replaceUrl, function (json) {
                        if ('oks' === json.status){
                            $($vote).text(json.message);
                            $('#vote').fadeIn();
                            $('#vote').fadeOut(5000);
                        }
                    });
                });
            });
        </script>

1 odpowiedź

odpowiedź 18 października 2016 przez Pietrak Pasjonat (18,850 p.)
wybrane 18 października 2016 przez Captivity

Najlepsza

Nie znam struktury html, ale zamiast $($vote).text(json.message); powinno być coś w stylu:

$btn.siblings('.badge').text(json.message);

komentarz 18 października 2016 przez Captivity Obywatel (1,030 p.)

Gdy wstawiłem to, co podałeś, to przestało mi podmieniać ocenę na aktualną.

A html to tak jak mówiłem,pętla obrazków:

{% for pic in pagination %}
                    <div class="well">
                        <h3><a href="{{ path('page_pic', {'id':pic.id, 'slug':pic.slug}) }}">{{ pic.title }}</a></h3>
                        <h5>{{ pic.createDate|date('d.m.Y, H:m') }} przez <a href="#">{{ pic.author.username }}</a> | <a href="{{ path('page_pic', {'id':pic.id, 'slug':pic.slug}) }}">Skomentuj ({{ pic.comments|length }})</a></h5>
                        <div class="img-responsive text-center"><a href="{{ path('page_pic', {'id':pic.id, 'slug':pic.slug}) }}"><img src="{{ asset(pic.picture) }}" alt="Tytuł Pica"/></a></div>
                        <p><div class="row text-center">
                            <a class="voteUp" href="{{ path('voteUp',{'id':pic.id}) }}"><button class="btn btn-success voteUp">Dobre <div class="badge">{{ pic.voteUp }}</div></button></a>{% if app.request.get('_route') == 'page_waiting' %} | <button class="btn btn-danger" >Słabe</button>{% endif %}
                            <p id="vote" style="display: none;">Dzięki!</p>
                        </div></p>

1	komentarz 18 października 2016 przez Pietrak Pasjonat (18,850 p.) zamiast siblings to find

komentarz 18 października 2016 przez Captivity Obywatel (1,030 p.)

Kapitalnie! Teraz nową ocenę pokazuje tylko przy tym, przy którym kliknąłem.

A jeszcze masz pomysł na ten tekst "dzięki"? Wyświetla się tylko przy pierwszym, a nie pod tym, na który kliknąłem