• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skrypt jQuery tylko w jednym elemencie

VPS Starter Arubacloud
0 głosów
124 wizyt
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ź

+1 głos
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
1
komentarz 18 października 2016 przez Pietrak Pasjonat (18,850 p.)
Użyj siblings i zmień style display dla #vote.

PS. ID musi być unikatowy.
komentarz 18 października 2016 przez Captivity Obywatel (1,030 p.)
Dzięki!!

Podobne pytania

0 głosów
4 odpowiedzi 253 wizyt
pytanie zadane 24 października 2015 w HTML i CSS przez Jordi Początkujący (290 p.)
0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 21 listopada 2015 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 610 wizyt
pytanie zadane 3 stycznia 2017 w JavaScript przez Marecki Obywatel (1,690 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...