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

przekazywanie argumentu do jquery

VPS Starter Arubacloud
0 głosów
318 wizyt
pytanie zadane 14 czerwca 2018 w JavaScript przez Mebya Użytkownik (700 p.)
Witam,
W jquery chcę zrobić podmienianie zawartości wtedy gdy dany przycisk jest klikniety, mam cztery przyciski z id 0,1,2,3
I teraz pytanie jak przekazać do jquery który przycisk jest kliknięty, w czystym js po prostu dał bym onclick=funkcja(1)
i w skrypcie zrobił switcha, a w jquery to nie mam pojęcia jak to ugryźć.

1 odpowiedź

+1 głos
odpowiedź 14 czerwca 2018 przez pablop76 VIP (123,060 p.)
wybrane 15 czerwca 2018 przez ScriptyChris
 
Najlepsza

W czystym js to nie byłaby dobra praktyka, ale nie o to pytasz więc w jq mamy tzw.kolekcje i automatyczne pętle więc sprawa jest banalna.

$('button').click(function(e){
  console.log(e.target);
});

e.target zwróci id klikniętego butona

komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)

Może ja wkleję po prostu kod który próbuję naskrobać, bo nie bardzo rozumiem o co w tym chodzi.
 

$(document).ready(function(){
    $('.js-mod-name-list-updater-0').on('click',function(update){
        update.preventDefault();

        var $link = $(update.currentTarget);

        $('.js-mod-name-list-ammo').toggleClass('text-dark-orange');

        $.ajax({
            method: 'GET',
            url: $link.attr('href')
        }).done(function(data) {

            $('.js-mod-name-list-ammo').html(data.ammoData[0].name);
            $('#mod-menu-ammo-0').toggleClass('mod-active');
            $('.dropdown-not-active-0').toggleClass('dropdown-active');


        });


    });

});

Wszędzie tam gdzie są zera powinno londować ID klikniętego przycisku, wlasciwie to znacznika <a>

1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)
update.target.id

to twoje kliknięte id
komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)
Mógłbym prosić, żebyś mi po prostu wpisał odpowiednie zmiany bo ja jestem w tym tak zielony, że dalej nie potrafię tego rozwiązać
1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)

Wszędzie tam gdzie są zera powinno londować ID klikniętego przycisku, wlasciwie to znacznika <a>

zamiast 0 wstaw update.target.id

komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)

Czyli dobrze zrozumiałem działanie tej metody.
Tylko, że 

$('.js-mod-name-list-updater-0').on('click',function(update){


Jeśli dam powiedzmy tutaj 

var clickedID = update.target.id;

I potem za to wyżej zero 

$('.js-mod-name-list-updater-'+clickedID).on('click',function(update){

To wtedy update jest niezdefiniowane. Za to jak dam wyżej to też nie będzie działało. Co z tym zrobić?

1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)

Nie rozumiem. Po co ? To nie ma sensu. To jest uchwyt do wszystkich elementów z klasą js-mod-name-list-updater-0 . Jeszcze możesz użyć $(this).attr('id') lub po prostu this.id jako id elementu klikniętego.

komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)
jeśli robie  this.id albo $(this).attr('id') to zwraca mi #js-mod-name-list-updater-0 (tylko na początku teraz jest # a nie kropka)
no i sens tego jest taki, że jeśli jakoś nie przemycę id klikniętego przycisku zamiast tego zera w js-mod-name-list-updatere-0 to będę musiał 4 razy ten sam kod wklejać a to nie jest zbyt dobre rozwiązanie. Tak nieładnie by to wyglądało:
$('.js-mod-name-list-updater-0').on('click',function(update){kod}
$('.js-mod-name-list-updater-1').on('click',function(update){kod}
$('.js-mod-name-list-updater-2').on('click',function(update){kod}
$('.js-mod-name-list-updater-3').on('click',function(update){kod}
1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)
Myślę, że się nie rozumiemy. Pokaż html z tymi przyciskami. Po co masz inne klasy dla każdego przycisku?
komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)

ostrzegam że może tam być coś czego nie powinno być bo troszkę mieszam sprawdzając czy coś działa.
Najlepiej to sobie wklej to do jakiegoś edytora bo się nie rozczytasz.

{% for ammo in ammoData %}
        <a href="{{ path('GunListCustomizing',{gunID: slug}) }}" class="list-group-item list-group-item-action p-0" id="{{ loop.index0 }}">
            <div class="row">
                <div class="col-9 pr-0 pl-4">
                    <img id="obrazek" height="60px" width="107px" src="{{ asset('img/mody/ammo/'~ ammoID[loop.index0] ~'.png') }}"> <br>
                    <span id="mod-menu-ammo" class="mod-menu-ammo-{{ loop.index0 }}">{{ ammoData[loop.index0]['name'] }}</span><br>
                    Price per shot: <span class="text-orange">{{ ammoData[loop.index0]['pricePerShot'] }}</span>
                </div>
                <div class="col-1 p-0 h-100 w-100">
                    <img class="w-75 h-75 border-green" src="{{ asset('img/gunStatistics/dmg.png') }}">
                    <img class="w-75 h-75" src="{{ asset('img/gunStatistics/velocity.png') }}">
                    <img class="w-75 h-75" src="{{ asset('img/gunStatistics/rateOfFire.png') }}">
                    <img class="w-75 h-75 border-red" src="{{ asset('img/gunStatistics/recoil.png') }}">
                    <img class="w-75 h-75 border-red" src="{{ asset('img/gunStatistics/range.png') }}">
                </div>
                <div class="col-2 pr-0 mr-0">
                    <div class="btn-group dropright h-100 w-100">
                        <button type="button" class="w-75 btn btn-block dropdown-toggle dropdown-toggle-split dropdown-not-active-{{ loop.index0 }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="sr-only">Toggle Dropright</span>
                        </button>
                        <div class="dropdown-menu row">
                            <div class="col-12">
                                <div class="row dropdown-item p-0">
                                    <div class="col-8">Velocity: <span class="text-orange">{{ ammoData[loop.index0]['speed'] }}</span> m/s</div>
                                </div>
                                <div class="row dropdown-item p-0">
                                    <div class="col-8 pb-2">Damage: <span class="text-orange">{{ ammoData[loop.index0]['damage'] }}</span> (in the body)</div>
                                </div>
                                <div class="row dropdown-item p-0 pt-2 pb-2 border-top border-bottom border-dark">
                                    <div class="col-4">DamageNear: <span class="text-orange">{{ ammoData[loop.index0]['damage'] }}</span> RangeNear: <span class="text-orange">{{ ammoData[loop.index0]['rangenear'] }}</span></div>
                                    <div class="col-4">DamageFar: <span class="text-orange">{{ ammoData[loop.index0]['damagefar'] }}</span> RangeFar: <span class="text-orange">{{ ammoData[loop.index0]['rangefar'] }}</span></div>
                                </div>
                                <div class="row dropdown-item p-0 pt-2">
                                    <div class="col-8">
                                        <img width="30" height="30" src="{{ asset('img/gunStatistics/recoil/doubleArrowX.png') }}" alt="cone modifier">
                                        Cone modifier: <span class="text-orange">{{ ammoData[loop.index0]['coneModifier'] }}</span>
                                    </div>
                                </div>
                                <div class="row dropdown-item p-0">
                                    <div class="col-8">
                                        <img width="30" height="30" src="{{ asset('img/gunStatistics/recoil/doubleArrowY.png') }}" alt="cone modifier">
                                        Recoil modifier: <span class="text-orange">{{ ammoData[loop.index0]['recoilModifier'] }}</span>
                                    </div>
                                </div>
                                <div class="row dropdown-item p-0 pt-2">
                                    <div class="col-5"> Max condition: <span class="text-orange">{{ ammoData[loop.index0]['maxCondition'] }}</span></div>
                                </div>
                                <div class="row dropdown-item p-0">
                                    <div class="col-5"> Wear per shot: <span class="text-orange">{{ ammoData[loop.index0]['wearPerShot'] }}</span> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    {% endfor %}
{% endblock %}

 

komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)

W znaczniku a na samym początku jest 
 

id="{{ loop.index0 }}"
    

(oczywiście potem coś dam dodam żeby sama liczba nie była ale narazie chodzi o to żeby to kliknięte id przekazać do 
$('.js-mod-name-list-updater-0').on('click',function(update){kod}
Zamiast tego zera

1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)
edycja 14 czerwca 2018 przez pablop76
Nie znam tego frameworka (chyba django). I co jest wynikiem tych zmiennych? Ale i tak nie wiem po co chcesz przekazać id zamiast 0 w uchwycie.
komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)
edycja 14 czerwca 2018 przez Mebya

robię przyciski pętlą, pętla robi ich tyle ile jest elementów w przekazywanej tablicy, w tym przykładzie akurat jest ich 4 

{{ loop.index0 }} - to po prostu zwykła zmienna iteracji
ammoData[loop.index0]['wearPerShot'] - to zwykłe wyciągnięcie 
elementów z tablicy.
path('GunListCustomizing',{gunID: slug}) - to jest akurat mało istotne, 
jest to potrzebne do przekazania id do kontrolera w celu przygotowania danych.
 Dla kontrolera to znaczy, że gunID = 40 ( w tym danym przypadku) 

Frameworki z których korzystam to bootstrap i symfony oraz język szablonów - czyli to wszystko co się znajduje w klamrach {{ }} {% %}

Znalazłem też pewien problem, gdy klikam na ten przycisk gdziekolwiek to 

var clickedID = update.target.id;

Nie ma wartości, to chyba jest problemem, gdy klikne w jakis obrazek gdzie dam id to wyskakuje mi id obrazka to powinno działać a mimo wszystko nie działa

komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)

Chyba się poddam i po prostu zrobię to tak :D 
Przynajmniej działa

$(document).ready(function(){
    $('#js-mod-name-list-updater-0').on('click',function(update){
        update.preventDefault();

        var $link = $(update.currentTarget);
        var clickedID = update.target.id;

        $('.js-mod-name-list-ammo').toggleClass('text-dark-orange');

        $.ajax({
            method: 'GET',
            url: $link.attr('href')
        }).done(function(data) {

            $('.js-mod-name-list-ammo').html(data.ammoData[0].name);
            $('#mod-menu-ammo-0').toggleClass('mod-active');
            $('.dropdown-not-active-0').toggleClass('dropdown-active');


        });


    });

});
$(document).ready(function(){
    $('#js-mod-name-list-updater-1').on('click',function(update){
        update.preventDefault();

        var $link = $(update.currentTarget);
        var clickedID = update.target.id;

        $('.js-mod-name-list-ammo').toggleClass('text-dark-orange');

        $.ajax({
            method: 'GET',
            url: $link.attr('href')
        }).done(function(data) {

            $('.js-mod-name-list-ammo').html(data.ammoData[1].name);
            $('#mod-menu-ammo-1').toggleClass('mod-active');
            $('.dropdown-not-active-1').toggleClass('dropdown-active');


        });


    });

});
$(document).ready(function(){
    $('#js-mod-name-list-updater-2').on('click',function(update){
        update.preventDefault();

        var $link = $(update.currentTarget);
        var clickedID = update.target.id;

        $('.js-mod-name-list-ammo').toggleClass('text-dark-orange');

        $.ajax({
            method: 'GET',
            url: $link.attr('href')
        }).done(function(data) {

            $('.js-mod-name-list-ammo').html(data.ammoData[2].name);
            $('#mod-menu-ammo-2').toggleClass('mod-active');
            $('.dropdown-not-active-2').toggleClass('dropdown-active');


        });


    });

});
$(document).ready(function(){
    $('#js-mod-name-list-updater-3').on('click',function(update){
        update.preventDefault();

        var $link = $(update.currentTarget);
        var clickedID = update.target.id;

        $('.js-mod-name-list-ammo').toggleClass('text-dark-orange');

        $.ajax({
            method: 'GET',
            url: $link.attr('href')
        }).done(function(data) {

            $('.js-mod-name-list-ammo').html(data.ammoData[3].name);
            $('#mod-menu-ammo-3').toggleClass('mod-active');
            $('.dropdown-not-active-3').toggleClass('dropdown-active');


        });


    });

});

 

1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)
No ale o to pytam. Przecież te elementy powinny mieć taką samą klasę ale inne id.  I wtedy pobierając cała kolekcję po klasie , klikając na którykolwiek dostajesz go jako obiekt (this) i możesz sobie z niego pobrać co chcesz.
komentarz 14 czerwca 2018 przez Mebya Użytkownik (700 p.)
edycja 14 czerwca 2018 przez Mebya
no problemem jest to, że kiedy klikne w jakiś element wewnątrz <a> to nie jest przekazywane to potrzebne ID :/ jak usuwam cały środek (wszystkie divy) i zostawiam samo <a> z jakims tekstem to dziala jak trzeba.
Ogarnąłem to troszkę i kiedy złapie odpowiedni skrawek tego mojego przycisku to klikany jest znacznik <a>, wyglada na to ze po prostu ten link siedzi pod spodem, a nie na wierzchu
1
komentarz 14 czerwca 2018 przez pablop76 VIP (123,060 p.)
edycja 15 czerwca 2018 przez pablop76
Sprawdź w konsoli właściwości klikniętego obiektu, napewno znajdziesz to czego szukasz.
1
komentarz 15 czerwca 2018 przez pablop76 VIP (123,060 p.)
edycja 15 czerwca 2018 przez pablop76

@Mebya,

To wykorzystaj przechwytywanie zdarzenia

update.currentTarget.id

W Twoim kodzie już jest pobrany ten element.

        var $link = $(update.currentTarget);

Masz tutaj referencje do całego klikniętego linku. Pobierasz z niego później do ajaxa href

url: $link.attr('href')

Więc dlaczego go nie wykorzystasz do pobrania id?

ja bym zrobił tak: zamiast $link

var $anchor = $(update.currentTarget);

var $href = $anchor.href;

var $id = $anchor.id;

I korzystał z tych zmiennych.

Jeszcze dla zachowania konwencji update zmieniłbym na e lub event, czyli zdarzenie

 

 

komentarz 15 czerwca 2018 przez Mebya Użytkownik (700 p.)

Zerknąłem teraz na adres URL który jest wywoływany wraz z kliknięciem no i właściwie o tym zapomniałem, 

$('#test').on('click',function(update){
 (...)
var $link = $(update.currentTarget);
}

wtedy nie jest wywoływany odpowiedni adres, bo nie jest kliknięty link tylko id diva "test" w którym te linki się znajdują, dlatego zamiast test powinny być po kolei id znaczników <a> inaczej var $link = $(update.currentTarget); zamiast przekazywać adres GunList/40/Customizing (tego poprawnego) przekazuje GunList/40 (niepoprawny) - wtedy JsonResponse nie jest przekazywany.
Podsumowując wracamy do początku i trzeba podmienić #test na id znaczników <a>

W skrócie onclick musi być na znacznik <a>, w innym wypadku zwracany jest nieodpowiedni adres url

1
komentarz 15 czerwca 2018 przez pablop76 VIP (123,060 p.)
edycja 15 czerwca 2018 przez pablop76
Jeżeli wszystkie linki są w pojemniku id=test to możesz delegować zdarzenie do a, dodając jako drugi parametr metody on() a. Czyli $('#test').on('click','a',function(e){}

Dałem Ci linka do poczytania.
komentarz 15 czerwca 2018 przez Mebya Użytkownik (700 p.)
Dobra, działa jak trzeba, nareszcie.
Dzięki za pomoc i cierpliwość!
Ale jak pisałem, to moj pierwszy kontakt z JS i Jquery

Podobne pytania

0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 8 grudnia 2016 w JavaScript przez hoktaur Pasjonat (22,250 p.)
0 głosów
1 odpowiedź 260 wizyt
pytanie zadane 7 sierpnia 2017 w JavaScript przez ElBajcyko Nowicjusz (150 p.)
0 głosów
1 odpowiedź 316 wizyt
pytanie zadane 3 sierpnia 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)

92,452 zapytań

141,261 odpowiedzi

319,074 komentarzy

61,854 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!

...