Witam, jak obsłużyć obsługę elementów w pętli JS?
Z bazy danych pobierane są dane za pomocą pętli foreach, skrypt JS ma się wykonywać dla każdego elementu wyświetlonego za pomocą pętli.
Obecnie element w pętli ma swoje id a w skrypcie JS używam "document.getElementById". Skrypt działa jednak wykonuje się tylko dla pierwszego, wyświetlonego elementu, dla pozostałych ni wykonuje się wcale, jak to naprawić?
Z góry dzięki za pomoc
0
1
moja kryształowa kula mówi, że...w tym wszystkim swoje łapy maczał sauron.
Serio myślisz, że wiem jak wygląda twój kod?
0
nie, myślałem że jest na to coś uniwersalnego.
kod.php```
Cena: '.$value['price'].' zł
';
echo '';
echo $value['state'];
echo "
";
echo '';
$new = "Nowy";
if($value['state'] == $new){
echo "Sprzedawany przedmiot jest nowy i nigdy nie był używany, posiada oryginalne opakowanie.";
}else{
echo "Sprzedawany przedmiot był już używany.";
}
echo "
";
echo'
'.$value['loc'].'
'.$value['state2'].'
';
echo '';
$ok = "Sprawny";
$inefficient = "Uszkodzony";
if($value['state2'] == $ok){
echo "Sprzedający gwarantuję że oferowany przedmiot jest w pełni sprawny i nie posiada żadnych wad technicznych.";
}elseif($value['state2'] == $inefficient){
echo "Oferowany przedmiot jest uszkodzony, posiada wady techniczne lub po prostu nie działa.";
}else{
echo "Sprzedający nie zna stanu technicznego przedmiotu, nie wiadomo czy jest on sprawny czy też nie.";
}
echo "
";
echo '
4400
4
4
Licytuj
<form><input id="pr-l" type="text" placeholder="Wpisz swoją cenę" /> <input id="su-l" type="submit" value="">" title="licytuj"/>
X
</form>
kod.js
var wyswietl=document.getElementById("imp");
var wyswietl_pole=document.getElementById("imp_in");
var back=document.getElementById("back");
var promptButton = document.getElementById("state");
var prompt = document.getElementById("prompt");
var promptShow = document.getElementById("state2");
var prompt2 = document.getElementById("prompty2");
wyswietl.onclick = function(){
wyswietl_pole.style.display = "block";
wyswietl.style.width ="1px";
}
back.onclick=function(){
wyswietl_pole.style.display = "none";
wyswietl.style.width ="";
}
promptButton.onclick = function(){
promptButton.style.display = "none";
prompt.style.display = "block";
}
prompt.onclick = function(){
prompt.style.display = "none";
promptButton.style.display = "block";
}
promptShow.onclick = function(){
prompt2.style.display = "block";
promptShow.style.display = "none";
}
prompt2.onclick = function(){
prompt2.style.display = "none";
promptShow.style.display = "block";
}
1
@michalos25: Mi się wydaje, że nie trzeba pisać skryptu dla każdego elementu w pętli. Patrząc na ten kod (o ile da się na to patrzeć w takim formacie), podejrzewam, że można napisać jeden kod JSowy do obsługi tego czegoś co chcesz zrealizować. Jak byłbyś bardziej konkretny w czym dokładnie problem leży (tzn. co chcesz zrealizować) pewnie dałoby się też skonkretyzować odpowiedź.
1
@michalos25 wstawiając posta chcesz żeby ktos Ci pomógł co wiąże się z tym że będzie musiał poświęcić swój czas. A moje pytanie jest takie ile Ty czasu poświęciłeś na wrzucenie tego posta? Jak dla mnie to co teraz jest wrzucone to jeden wielki shit, wziąłeś to przekopiowałeś od siebie i wkleiłeś co pewnie zajęło Ci niecałe 10s, a teraz ktoś to ma analizować i znaleźć co jest nie tak. Skoro chcesz pomocy to opisz dokładnie problem, wstaw kod odpowiednio sformatowany, żeby dało sie na tym pracować.
co do problemu to skoro nie działa Ci js to odpal w przeglądarce narzędzie dla deweloperów, przeanalizuj kod strony czy są wszystkie znaczniki czy maja dobre id, czy jest caly kod js w przeglądarce, jak jest to sprawdź za pomocą konsoli te zmienne.
0
Kod wstawiłem pomiędzy znacznikami </> jednak się nie sformatował, pewnie mój błąd. Wydawało mi się że dobrze opisałem problem ale opiszę go jeszcze raz.
Kod JS wykonuje się prawidłowo dla pierwszego elementu w pętli, dla pozostałych elementów kod nie wykonuje się wgl. Nie znam za dobrze JS, w sumie znam tylko podstawy podstaw a ten skrypt jest mi po prostu potrzebny, Id przypisuję do elementu będącego w pętli, np span czy div, po kliknięciu ma wykonać się kod pokazujący bloczek poniżej, zamienić style dla diva z "display:none" na "display:block", tak jak już wspomniałem wszystko działa pięknie i idealnie dla pierwszego elementu dla drugiego już nie. Myślę że podobny problem wystąpił by kiedy umieścilibyśmy na tej samej stronie dwa elementy o tym samym id, dla pierwszego zapewne kod by zadziałał dla drugiego nie, w sumie... tak działa pętla. Myślę że teraz już dokładnie wyjaśniłem swój problem.
0
My rozumiemy Twój problem (mniej więcej) - nie rozumiemy tylko czemu chcesz się tak męczyć i pętlować kod JS dla każdego bloku, w którym potrzebujesz wykonać akcję.
Pokażę Ci coś. Wyobraź sobie, że masz 100 elementów na stronie, które reprezentują listę produktów, np. coś takiego:
<div id="products-list">
<div class="product">
<!-- dane produktu -->
<a class="check-price" href="#">Sprawdź cenę</a>
</div>
<div class="product"><!-- kolejny produkt --></div>
<div class="product"><!-- kolejny produkt --></div>
<!-- itd... -->
</div>
Przypuśćmy, że chcesz wywołać skrypt, sprawdzający cenę po kliknięciu na przycisk 'Sprawdź cenę'. I teraz zamiast pisać 100 skryptów do każdego z tych przycisków, w bibliotece jQuery, wyglądałoby to mniej więcej tak:
$("a.check-price").on('click',function()
{
// kod do wywolywania ceny produktu
});
Czyli masz klasę na przycisk i w JS ten przycisk ma swój kod. Można oczywiście to jeszcze zoptymalizować, inaczej poukładać, napisać własny plugin. Chodzi o to, żebyś nie walił kodu JSowego w 100 funkcjach czy linijkach, ale zrobił sobie zewnętrzny plik i skorzystał z różnych bibliotek, które spowodują, że Twój kod będzie łatwy do ogarnięcia, rozwijania i debugowania, oraz przyjemny dla programisty.
Looknij sobie: http://www.php.rk.edu.pl/w/p/jquery-w-prostych-przykladach/
0
@michalos25: dwie rzeczy:
1.popraw ten kod co już wrzuciłeś (wklej go poprawnie między znacznikami)
2.wrzuć kod z przeglądarki już po pobraniu z serwera (wyświetl źródło strony, skopiuj go i wrzuć tutaj)
0
var wyswietl=document.getElementById("imp");
var wyswietl_pole=document.getElementById("imp_in");
var back=document.getElementById("back");
var promptButton = document.getElementById("state");
var prompt = document.getElementById("prompt");
var promptShow = document.getElementById("state2");
var prompt2 = document.getElementById("prompty2");
wyswietl.onclick = function(){
wyswietl_pole.style.display = "block";
wyswietl.style.width ="1px";
}
back.onclick=function(){
wyswietl_pole.style.display = "none";
wyswietl.style.width ="";
}
promptButton.onclick = function(){
promptButton.style.display = "none";
prompt.style.display = "block";
}
prompt.onclick = function(){
prompt.style.display = "none";
promptButton.style.display = "block";
}
promptShow.onclick = function(){
prompt2.style.display = "block";
promptShow.style.display = "none";
}
prompt2.onclick = function(){
prompt2.style.display = "none";
promptShow.style.display = "block";
}
<?php
$tbl = $connect->query("SELECT * FROM `auctions`");
foreach ($tbl as $key => $value){
$id_auc = $value['id_auc'];
echo '
<div class="content-shop">
<div class="pr-view">
<div class="photo-shop"><img src="upload/uploads/Koala.jpg" alt=""/></div>
<div class="content-view-shop">
<div class="title-shop">
<a href="auction.php?id='.$id_auc.'">'.$value['title'].'</a>
</div>
<div class="inf-shop">
<div class="pr-view-sh">
Cena: '.$value['price'].' zł
</div>';
echo '<div id="state2" class="pr-view-sh">';
echo $value['state'];
echo "</div>";
echo '<div id="prompty2" class="prompt">';
$new = "Nowy";
if($value['state'] == $new){
echo "Sprzedawany przedmiot jest nowy i nigdy nie był używany, posiada oryginalne opakowanie.";
}else{
echo "Sprzedawany przedmiot był już używany.";
}
echo "</div>";
echo' </div><div class="inf-shop">
<div class="pr-view-sh">
'.$value['loc'].'
</div>
<div id="state" class="pr-view-sh">
'.$value['state2'].'
</div>';
echo '<div id="prompt" class="prompt">';
$ok = "Sprawny";
$inefficient = "Uszkodzony";
if($value['state2'] == $ok){
echo "Sprzedający gwarantuję że oferowany przedmiot jest w pełni sprawny i nie posiada żadnych wad technicznych.";
}elseif($value['state2'] == $inefficient){
echo "Oferowany przedmiot jest uszkodzony, posiada wady techniczne lub poprostu nie działa.";
}else{
echo "Sprzedający nie zna stanu technicznego przedmiotu, nie wiadomo czy jest on sprawny czy też nie.";
}
echo "</div>";
echo '
</div>
<div class="obs-shop">
<div class="k">
<i class="icon-eye"></i> 4400<br/>
<i id="obs" class="icon-star-empty obs-pr"></i> 4
</div>
</div>
<div class="fun">
<div class="imp"><a href="auction.php?id='.$id_auc.'">Kup</a></div>
<div id="imp" class="imp">Licytuj</div>
<div id="imp_in" class="imp-click"><form><input id="pr-l" type="text" placeholder="Wpisz swoją cenę" /> <input id="su-l" type="submit" value=">" title="licytuj"/>
<div id="back" title="anuluj">X</div>
</form></div>
</div>
</div></div><div class="clear"></div>
</div>
';}
?>
kod źródła{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
</head>
<!--====================MENU=====================================-->
<!--menu-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.php">Tablica ogloszen</a></li>
<li class="active"><a href="shop.php">Sklep</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="new-auction.php">+Dodaj</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beata
<ul class="dropdown-menu">
<li><a href="profil.php"><i class="icon-user"></i>Zobacz swój profil</a></li>
<li><a href="mailbox.php"><i class="icon-mail"></i>Wiadomości</a></li>
<li><a href="my-classifieds.php"><i class="icon-edit"></i>Twoje ogloszenia</a></li>
<li><a href="selling.php"><i class="icon-eye"></i>Sprzedajesz</a></li>
<li><a href="#"><i class="icon-check-1"></i>Sprzedane</a></li>
<li><a href="settings.php"><i class="icon-cog"></i>Ustawienia</a></li>
<li><a href="logout.php?url=http://localhost/serwis/shop.php"><i class="icon-power"></i>Wyloguj sie!</a></a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!--===============================================================================================================================================================================================================================================================================================-->
<body>
<div class="container">
<a href="new-auction.php" class="btn btn-success btn-lg ogl btn-block"><span class="ogl">+</span>Dodaj aukcję</a> <form class="navbar-form search-form" method="GET" action="search.php">
<div class="row search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Wpisz nazwę produktu" name="title_ad" style="color:#e6e6e6;">
<input type="text" class="form-control" placeholder="Miasto" name="city" style="color:#e6e6e6;">
</div>
<button id="btn-submit" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="content-shop">
<div class="pr-view">
<div class="photo-shop"><img src="upload/uploads/Koala.jpg" alt=""/></div>
<div class="content-view-shop">
<div class="title-shop">
<a href="auction.php?id=22">Samsung Galaxy S5</a>
</div>
<div class="inf-shop">
<div class="pr-view-sh">
Cena: 87 zł
</div><div id="state2" class="pr-view-sh">Nowy</div><div id="prompty2" class="prompt">Sprzedawany przedmiot jest nowy i nigdy nie był używany, posiada oryginalne opakowanie.</div> </div><div class="inf-shop">
<div class="pr-view-sh">
Daleszyce
</div>
<div id="state" class="pr-view-sh">
Sprawny
</div><div id="prompt" class="prompt">Sprzedający gwarantuję że oferowany przedmiot jest w pełni sprawny i nie posiada żadnych wad technicznych.</div>
</div>
<div class="obs-shop">
<div class="k">
<i class="icon-eye"></i> 4400<br/>
<i id="obs" class="icon-star-empty obs-pr"></i> 4
</div>
</div>
<div class="fun">
<div class="imp"><a href="auction.php?id=22">Kup</a></div>
<div id="imp" class="imp">Licytuj</div>
<div id="imp_in" class="imp-click"><form><input id="pr-l" type="text" placeholder="Wpisz swoją cenę" /> <input id="su-l" type="submit" value=">" title="licytuj"/>
<div id="back" title="anuluj">X</div>
</form></div>
</div>
</div></div><div class="clear"></div>
</div>
<div class="content-shop">
<div class="pr-view">
<div class="photo-shop"><img src="upload/uploads/Koala.jpg" alt=""/></div>
<div class="content-view-shop">
<div class="title-shop">
<a href="auction.php?id=23">Samsung Galaxy S5</a>
</div>
<div class="inf-shop">
<div class="pr-view-sh">
Cena: 87 zł
</div><div id="state2" class="pr-view-sh">Nowy</div><div id="prompty2" class="prompt">Sprzedawany przedmiot jest nowy i nigdy nie był używany, posiada oryginalne opakowanie.</div> </div><div class="inf-shop">
<div class="pr-view-sh">
Daleszyce
</div>
<div id="state" class="pr-view-sh">
Sprawny
</div><div id="prompt" class="prompt">Sprzedający gwarantuję że oferowany przedmiot jest w pełni sprawny i nie posiada żadnych wad technicznych.</div>
</div>
<div class="obs-shop">
<div class="k">
<i class="icon-eye"></i> 4400<br/>
<i id="obs" class="icon-star-empty obs-pr"></i> 4
</div>
</div>
<div class="fun">
<div class="imp"><a href="auction.php?id=23">Kup</a></div>
<div id="imp" class="imp">Licytuj</div>
<div id="imp_in" class="imp-click"><form><input id="pr-l" type="text" placeholder="Wpisz swoją cenę" /> <input id="su-l" type="submit" value=">" title="licytuj"/>
<div id="back" title="anuluj">X</div>
</form></div>
</div>
</div></div><div class="clear"></div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
<h4 class="modal-title" id="myModalLabel">Zaloguj się </h4>
</div>
<div class="modal-body">
<form action="log.php?url=http://localhost/serwis/shop.php" method="post">
<input id="login" type="text" placeholder="Login" name="login"/>
<input id="pass" type="password" placeholder="Hasło" name="haslo"/>
<input id="log_su" type="submit" value="Zapraszamy"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default ">Zapomniałem hasła</button>
</div>
</div>
</div>
</div>
<!--===================================================================================++++++++=============
=========================================================================================================-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/function-1.js"></script>
</body>
</html>
}
0
I wszystko jasne. Umiesz html czy nie? Atrybut id w htmlu jest unikalnym identyfikatorem przypisanym dla danego elementu, więc jak możesz mieć na stronie kilka divów o tym samym id? Dlatego Ci to nie działa tylko dla pierwszego znalezionego elementu.
Tak możesz rozwiązać swój problem. Zamiast przypisywać te samo id do elementów przypisz im tą samą klasę. event.target rozpoznaje który element kliknąłeś i dzięki temu możesz sobie go odpowiednio zmodyfikować (zmienić tekst, tak jak to aktualnie robiłeś). Dodatkowo do klikniętego elementu dodaje lub usuwam klasę "selected" (nazwa jest bez znaczenia, tylko żeby ten klikalny element nie miał już takiej klasy nadanej przez Ciebie, powiedzmy, że ma być unikalna dla klikanych elementów), żeby ustalić w jakim stanie jest element czy przed czy po kliknięciu.
<div id="a1" class="price">Początkowy</div>
kod js
$("div.price").on('click', event => {
var clickedElement = $(event.target);
if(clickedElement.hasClass("selected"))
{
clickedElement.text("Początkowy");
clickedElement.removeClass("selected");
}
else
{
clickedElement.text("Zmieniony");
clickedElement.addClass("selected");
}
});
0
W przykładzie który podałeś co powinno się stać po kliknięciu? Sorry, za takie dopytywanie i nijakie pytania ale jestem kompletnie głupi jeśli chodzi o JS i w żaden sposób nie mogę go ogarnąć
1
I wszystko jasne. Umiesz html czy nie? Atrybut id w htmlu jest unikalnym identyfikatorem przypisanym dla danego elementu, więc jak możesz mieć na stronie kilka divów o tym samym id? Dlatego Ci to nie działa tylko dla pierwszego znalezionego elementu.
To w sumie można było wywnioskować na początku tego tematu, z tamtego kodu, jak pobierał wszystko funkcją getElementById. Ja bym zapytał autora, czemu nie użył jakiejś biblioteki like jQuery do napisania prostego, czytelnego kodu obsługującego te zdarzenia, skoro i tak to zaciąga i tak (Bootstrap tego wymaga). Plus czemu u licha w tym pliku PHP gdzie ma zapytanie do bazy, wypisuje 'echem' cały HTML, jakby nie można było zrobić pliku PHP z kodem HTML i tylko podmieniać odpowiednie wartości choćby tak:
<div class="pr-view-sh">
Cena: <?php echo $value['price']; ?> zł
</div>
Toć zagwozdka... :)
Stary (@michalos25): dobra rada - looknij sobie jakieś proste projekty https://github.com/venam/php-skeleton/venam/php-skeleton), gdzie można po ludzku załączyć sobie header, footer, funkcje, DB, pliki JS, pliki CSS + obczaj sobie prosty kurs jQuery (np. http://kursjs.pl/kurs/jquery/jquery.php), bo tak to się zajeździsz z tym kodem, chopie... ;)
0
OK, dzięki za rady i pomoc :) A co do PHP czy pomiędzy wypisywaniem echem całej pętli a podmienianiem tylko odpowiednich funkcji jest jakaś różnica?
1
Skopiuj sobie ten kod i zapisz z rozszerzeniem html i klikaj na napisy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="a1" class="price">Początkowy</div>
<div id="a2" class="price">Początkowy</div>
</body
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("div.price").on('click', event => {
var clickedElement = $(event.target);
if(clickedElement.hasClass("selected"))
{
clickedElement.text("Początkowy");
clickedElement.removeClass("selected");
}
else
{
clickedElement.text("Zmieniony");
clickedElement.addClass("selected");
}
});
</script>
0
Cholerne dzięki :D :D :D Mógłbyś mi jeszcze polecić jakiś dobry kurs JS i JQuery?
1
ja raczej czytam książki, a jak czegoś nie wiem to potem szczegółów szukam na internecie.
Co do JS to naprawdę fajnie była napisana:
JavaScript. Programowanie obiektowe Stoyan Stefanov
a z jQuery to:
JavaScript i jQuery. Nieoficjalny podręcznik (w sumie za bardzo się tam autor rozwleka,ale wytłumaczone jest ok)
@michalos25 przypomniałem sobie o kursie z youtube. Wpisz sobie mirosław zelent i obejrzyj sobie php (przyda Ci się), js też tam jest (ale nie oglądałem, tylko php i powiem, że był ok), gość fajnie tłumaczy