Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS]Jak złapać niestandardowy atrybut article_id
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
stania-pl
Witam !

Jestem nowy, dopiero uczę się JS mam taki oto problem

Moim celem jest rozwijanie całego artykułu po kliknięciu linka Więcej.

mam kod HTML gdzie obok class mam atrybut article_id

  1. <div class="leading-0" article_id="7">
  2. <span> cos tam costam </span>
  3. <a class="czytajwiecej" href="#">Wiecej</a>
  4. </div>
  5.  
  6. <div class="leading-1" article_id="8">
  7. <span> blalalalalalla </span>
  8. <a class="czytajwiecej" href="#">Wiecej</a>
  9. </div>


Jak za pomocą JS złapać wartość elementu article_id ? Jest to niestandardowy atrybut (element ID wiem jak złapać - getElementById) ?

Krok dalej ?
Mam przygotowany plik php który będzie pobierał z bazy danych pełen tekst artykułu i chciałbym aby zamieniał po kliku na Więcej "intro" (<span> cos tam costam </span>) na cały artykuł.

Jak połączyć kliknięcie <a class="czytajwiecej"> z danego diva aby wrzucał pełny artykuł do diva (plik php mam gotowy - przekazuje article_id i wypisuje mi pełny artykuł o takim ID)

Napisałem coś takiego :


function pokazWiecej() {

$.post("caly.php", {
id: 7
// nie wiem jak do id zapisać vartość atrybutu article_id
},
function(response){

$(".leading-0").html(response);
}
);
}


oczywiście dałem onclick na linka Więcej no i działa ale nie wiem dokładnie jak wrzucać odpowiednią treść do odpowiedniego diva

np

<div class="leading-0" article_id="7">
TREŚĆ ARTYKUŁU ID 7
</div>

<div class="leading-1" article_id="8">
TREŚĆ ARTYKUŁU ID 8
</div>
kamil4u
1. Przypisujesz akcję do <a class="czytajwiecej" href="#">Wiecej</a> - $('.czytajwiecej').click
2. Przy kliknięciu w ciele funkcji this wskazuje na kliknięty element
3. Pobierasz rodzica tego elementu - $(this).parent
4. Gdy już masz rodzica pobierasz jego id - $(...)..attr('id')
stania-pl
Cytat(kamil4u @ 12.09.2012, 18:55:15 ) *
1. Przypisujesz akcję do <a class="czytajwiecej" href="#">Wiecej</a> - $('.czytajwiecej').click
2. Przy kliknięciu w ciele funkcji this wskazuje na kliknięty element
3. Pobierasz rodzica tego elementu - $(this).parent
4. Gdy już masz rodzica pobierasz jego id - $(...)..attr('id')


Dzięki za zainteresowanie

1. Przypisujesz akcję do <a class="czytajwiecej" href="#">Wiecej</a> - $('.czytajwiecej').click

Mam przypisane< a href="#" onClick="pokazWiecej();">Wiecej</a> - po kliknięciu uruchamiana jest funkcja pokazWiecej()


2. Przy kliknięciu w ciele funkcji this wskazuje na kliknięty element
3. Pobierasz rodzica tego elementu - $(this).parent
4. Gdy już masz rodzica pobierasz jego id - $(...)..attr('id')

W ten sposób mogę pobrać Id diva w którym kliknięto przycisk "Więcej" - tylko, że mi potrzeba pobrać nie div id tylko article_id - w jaki sposób to zrobić?


Ogólnie chciałbym aby to tak działało

klikamy "więcej" -> pobieramy id rodzica z article_id (nie z div id) -> otrzymujemy np id = 7 -> przesyłamy zmienną id do pliku caly.php -> w odpowiedzi (wysyłanie Post ajaxem) dostajemy pełny artykuł ktory muszę umieścić w divie ktory ma article_id="7"


W jaki sposób wrzucić coś za pomocą .html() posługując się tylko article id

Kod
<script>
function pokazWiecej() {

$.post("caly.php", {
id: 7
// nie wiem jak do id zapisać vartość atrybutu article_id $('article_id').text() questionmark.gifquestionmark.gif? - nie działa
},
function(response){

$("article_id='7'").html(response);
}
);
}
</script>


oczywiście taki kod nie działa.



qrooel
  1. $(".jakas-klasa-css").click(function() {
  2. console.log($(this).attr('szukany-atrybut'));
  3. });


http://api.jquery.com/parents/
http://stackoverflow.com/questions/966408/...ent-of-a-parent
http://stackoverflow.com/questions/394470/...side-parent-div
grzes999
Masz gotowca tylko, że w Jqery i nie wiem czy na pewno będzie działał ale powinien.

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. $(function () {
  3. $('.czytajwiecej').click(function() {
  4. $.ajax({
  5. type: "POST",
  6. url: "caly.php",
  7. data: { id: $(this).parent().attr('article_id') }
  8. }).done(function( dane ) {
  9. $(this).prev().html(dane)
  10. });
  11. });
  12.  
  13. })
  14.  
[JAVASCRIPT] pobierz, plaintext


Pisałem bez sprawdzania; ale może coś ci to pomoże. I pamiętaj o dołączeniu biblioteki do pliku
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.