Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][PHP]Problem z licznikiem jquery
Forum PHP.pl > Forum > Przedszkole
inomi13
Witam, mam problem z licznikiem w poniższym kodzie. Po dodaniu np. 5 wierszy i kiedy w 1,2,3,4 wierszu zmieniam option na name2 to zawsze input domain zmienia mi w ostatnim wierszu a nie w tym wierszu w którym właśnie jestem.

  1. <div class="row">
  2. <div class="col-md-3 col-sm-12">
  3. <select id="select_register" name="service_name[0]" class="form-select">
  4. <option value="name1">1</option>
  5. <option value="name2">2</option>
  6. </select>
  7. </div>
  8. <div id="domain" class="col-md-3 col-sm-12" style="display:none;">
  9. <input type="text" name="domain_name[0]" class="form-control">
  10. </div>
  11. <div class="col-md-3 col-sm-12">
  12. <button type="button" id="add" class="btn btn-success form">Dodaj</button>
  13. </div>
  14. </div>
  15. <div id="more_register_form"><div class="row">

  1. $(document).ready(function(){
  2. var counter = 1;
  3. $("#add").click(function () {
  4. var html = '';
  5. html += '<div class="row"><div class="col-md-3 col-sm-4">
  6. html += '<select id="select_register' + [counter] + '" name="service_name[' + [counter] + ']" class="form-select">';
  7. html += '<option value="name1">1</option>';
  8. html += '<option value="name2">2</option></select>';
  9. html += '<div id="domain[' + [counter] + ']" class="col-md-3 col-sm-12" style="display:none;"><input type="text" name="domain_name[' + [counter] + ']" class="form-control"></div>';
  10. html += '<div class="col-md-3 col-sm-4"><button type="button" id="remove" class="btn btn-danger form">Usuń usługę </button><br/></div></div>';
  11.  
  12. $('#more_register_form').append(html);
  13. $(document).on('click', '#remove', function (){
  14. $(this).closest('.row').remove();
  15. counter = 1;
  16. });
  17.  
  18. $('#select_register'.counter).on('change', function() {
  19. if(this.value == 'name2'){
  20. $('#domain'.counter).show();
  21. }
  22. else{
  23. $('#domain'.counter).hide();
  24. }
  25.  
  26. counter ++;
  27. });
  28. });
  29. });
nospor
$('#domain'.counter).show();
No bo counter ma wowczas ostatnia wartosc.
Zamiast bawic sie liczby, to lec po klasach i szukaj domain w tym samym div co twoj select i z banki
trueblue
Linie 13-16, to powinno się znaleźć na zewnątrz i dlaczego po usunięciu wiersza ustawiasz counter=1?

Co to za konstrukcja $('#select_register'.counter) ?
inomi13
Faktycznie źle przepisałem kod. Nie do końca rozumiem jak przerobić aby lecieć po klasach. Sprawdziłem i zmieniając tylko select bez warunków też zwraca tylko ostatnią wartość anie tą którą aktualnie klikam.


  1. $(document).on('change', '#select_register'+counter, function (){
  2. alert('#select_register'+counter);
  3. };


  1. $(document).ready(function(){
  2. var counter = 1;
  3. $("#add").click(function () {
  4. var html = '';
  5. html += '<div class="row"><div class="col-md-3 col-sm-4">
  6. html += '<select id="select_register' + [counter] + '" name="service_name[' + [counter] + ']" class="form-select">';
  7. html += '<option value="name1">1</option>';
  8. html += '<option value="name2">2</option></select>';
  9. html += '<div id="domain[' + [counter] + ']" class="col-md-3 col-sm-12" style="display:none;"><input type="text" name="domain_name[' + [counter] + ']" class="form-control"></div>';
  10. html += '<div class="col-md-3 col-sm-4"><button type="button" id="remove" class="btn btn-danger form">Usuń usługę </button><br/></div></div>';
  11.  
  12. $(document).on('change', '#select_register'+counter, function (){
  13. var selected = $(this).val();
  14. if(selected == 'another')
  15. {
  16. $('#domain'+counter).show();
  17. }
  18. else
  19. {
  20. $('#domain'+counter).hide();
  21. }
  22. });
  23. counter ++;
  24. });
  25. $('#more_register_form').append(html);
  26. $(document).on('click', '#remove', function (){
  27. $(this).closest('.row').remove();
  28. counter = 1;
  29. });
  30. });
  31. });
nospor
Cytat
Sprawdziłem i zmieniając tylko select bez warunków też zwraca tylko ostatnią wartość anie tą którą aktualnie klikam.
No przeciez juz ci to wyjasnilem: counter na tym etapie ma ostatnia wartosc. To jest zmienna globalna i to co miala ostatnio to ma nadal. Niewazne czy uzyjesz jeden warunek, 1000 warunkow czy zadnego
inomi13
Nie kuman jak mam to zrobići już się w tym wszystkie pogubiłem. Przerabiając fragment kodu na klasy input #domain dodaje się tylko do pierwszego wiersza. W jaki sposób zrobić unikalną nazwę klasę ?


  1. $(document).on('change', '#select_register', function (){
  2. var selected = $(this).val();
  3. if(selected == 'another')
  4. {
  5. $('#domain').show();
  6. }
  7. else
  8. {
  9. $('#domain').hide();
  10. }
  11. });
nospor
Klas nie robi sie unikalnych. Mowilem, szukaj klasy w dive z select. a ty teraz lecisz po id #domain i zdziiwony ze lapie ci pierwszy.
1) Rozrozniaj co to ID a co to klasa
2) Czytaj co sie do ciebie pisze
3) Nadaj klase dla divow domain, i potem bierz ten div domain z klasa, ktory lezy w tym samym divie co select, z ktorego wlasnie wybrales. Jak znalezc ten div co lezy w nim select? No jquery ma takie bajery jak PARENT().
inomi13
Zrobiłem tak i display:block jest dodawany do wszystkich inputów a nie do tego konkretnego.


  1. html += '<div class="col-md-3 col-sm-12" style="display:none;"><input type="text" name="domain_name[' + [counter] + ']" class="domain form-control"></div>';


  1. $(document).on('change', '#select_register', function (){
  2.  
  3. var selected = $(this).val();
  4. if(selected == 'name2')
  5. {
  6. $(".domain ").parent().css({"display": "block"});
  7. }
  8. else
  9. {
  10.  
  11. $(".domain ").parent().css({"display": "none"});
  12. }
  13. });
viking
Sprawdź sobie w konsoli co w zdarzeniu on.change da $(this)
inomi13
Ustawiając $(document).on('change', this, function () w konsoli nie wyświetla się żadna informacja. Cały czas nie wiem jak ogarnąć kwestie aby $(".domain ").parent().css({"display": "none"}); działał tylko do danego wiersza a nie do wszystkich.
nospor
Cytat
Cały czas nie wiem jak ogarnąć kwestie aby $(".domain ").parent().css({"display": "none"}); działał tylko do danego wiersza a nie do wszystkich.

Ostatni raz pisze: czytaj co sie do ciebie pisze. Wyraznie ci napisalem od czego masz robic parent i dopiero majac ten parent masz szukac domain. A ty przeczytasz cos po lebkach, potem walisz losowy kod i placzesz ze nei dziala.... :/
inomi13
Przecież ja nie proszę o gotowy kod tylko o konkretną sugestie a nie zdawkowe odpowiedzi. Chyba po to jest forum... Jak pisze że nie rozumiem do końca twoich sugestii więc jak ma zrobić tak jak proponujesz.

Skoro mam html i dodając klasę do div domain to jak ma działać parent() skoro działa on tylko do klasy wyżej? Tak jak wspominałem chce żeby po wybraniu opcji "name2" pokazywał się div z domain i chował kiedy wybierze się inną opcję.

  1.  
  2. <div class="col-md-3 col-sm-12">
  3. <select id="select_register" name="service_name[0]" class="form-select">
  4. <option value="name1">1</option>
  5. <option value="name2">2</option>
  6. </select>
  7. </div>
  8. <div id="domain" class="col-md-3 col-sm-12" style="display:none;">
  9. <input type="text" name="domain_name[0]" class="form-control">
  10. </div>

viking
$(document).on('change', this, function () ciekawa skladnia ale nie ma nic wspólnego z dokumentacją jquery.

$(document).on('change', function () {
console.log($(this))
})
inomi13
Faktycznie masz racje jest błędna składnia jednak cały czas nie mogę złapać punktu zaczepienia jak to ugryźć bo ile nie ma problemu z pokazanie div domain w danym wierszu to cały czas tkwię w miejscu jak zrobić aby div domain hide działał w wyznaczonym wierszu a nie w każdym. Czy parent() dać do warunku czy do wyniku sad.gif
nospor
Cytat
Przecież ja nie proszę o gotowy kod tylko o konkretną sugestie

I taka ode mnie dostales ale ja olales. Sie uparles ze masz dojsc do domain i ignorujeszz wszystko po drodze. No nie moja wina smile.gif Wyraznie po raz kolejny ci powtarzam, ze parent masz pobrac na podstawie selecta z ktorego wybrales dane ale ty mnie nie sluchasz. No to co ja mam poradzic na to?
inomi13
Na głowiłem się z tym parent() ale w ten sposób nie udało mi się tego zrobić. Znalazłem gdzieś na forum podobny problem i po przerobieniu kodu teraz wszystko gra. Dzięki wszystkim za pomoc i cierpliwość.

  1. $(document).on('change', '#select_register', function (){
  2. const selected = $(this).val();
  3. const row = $(this).closest('.row');
  4. if (selected == 'name2')
  5. {
  6. row.find('.domain').show();
  7. }
  8. else
  9. {
  10. row.find('.domain').hide();
  11. }
nospor
A wersja z parentem by wygladala tak:
zamiast
const row = $(this).closest('.row');

by bylo
const row = $(this).parent();

I reszta tak samo jak masz w poprzednim poscie. Zadna filozofia
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.