Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Jquery

Skapad av bunny, 2013-06-07 16:53 i Webbutveckling & Programmering

2 286
13 inlägg
0 poäng
bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
0
Jag har massa #postInFeed - och massa #postReplyContainer.

$('.postInFeed').click(function() {
$('.postReplyContainer').toggleClass('postReplyVisible');

});

Detta funkar som jag vill, fast funktionen lägger ju självklart till klassen="postReplyVisible" på alla divs, istället för bara just den man trycker på.

#postReplyContainer ligger inuti #postInFeed. När man trycker på #postInFeed skall respektive #postReplyContainer visas / glida ner

Hur ska jag lösa detta problem?

Ingen status

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

SkalmanOnDrugs
Visningsbild
P 35 Göteborg Hjälte 2 758 inlägg
0

Svar till bunny [Gå till post]:
Klasser använder du när du vill ha samma för flera element. Annars använder du id. T.ex.

<div id="div1" class="divtype" />
<div id="div2" class="divtype" />

Med jQuery anropar du div1 genom $('#div1')


Eller är det jag som missförstått din fråga?

Du måste konstruera ytterligare pyloner

bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
Trådskapare
0

Svar till SkalmanOnDrugs [Gå till post]:
Hmm, ja. Detta har ingenting med HTML att göra. Jag har flera
<div class="postInfeed"> //trycker här
<div class="postReplyContainer"> //denna öppnas *
</div>
</div>

<div class="postInfeed">
<div class="postReplyContainer"> //denna öppnas inte (samma id)
</div>
</div>

Min fråga handlar om jQuery, hur jag ska få jQuery att öppna sin "child" (postReplyContainer), enskilt. oberoende av alla andra divar som har samma namn. (Problemet just nu är att trycker jag på någon postInFeed så öppnas ALLA postReplyContainer's. Istället för bara den som är just inuti postInFeed (se stjärna *) :D

Ingen status

SkalmanOnDrugs
Visningsbild
P 35 Göteborg Hjälte 2 758 inlägg
0

Svar till bunny [Gå till post]:
Aha.
Vad sägs om:

$('.postInFeed').click(function() {
var children=$(this).children();
$(children[0]).toggleClass('postReplyVisible');
});

$(this) är jQuery objektet för det element som triggat click-eventet. children() returnerar en array av childnoderna, så children[0] är den första noden. Om du kommer att ha mer än en ned kanske du får anvädna getElementById eller något liknande för att få just rätt element (det är nog snyggare, jag gjorde en snabb lösning bara).

Testa och se om det funkar.

Du måste konstruera ytterligare pyloner

bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
Trådskapare
0
Svar till SkalmanOnDrugs [Gå till post]:
Oj, förlåt mig. Jag märkte nu att divarna ligger faktiskt såhär:

<div class="postInfeed">
</div>
<div class="postReplyContainer">
</div>

<div class="postInfeed">
</div>
<div class="postReplyContainer">
</div>

<div class="postInfeed">
</div>
<div class="postReplyContainer">
</div>

ETC. Då funkar inte children, har du ett nytt förslag? :3

Ingen status

SkalmanOnDrugs
Visningsbild
P 35 Göteborg Hjälte 2 758 inlägg
0

Svar till bunny [Gå till post]:
Fan vilket krångligt sätt du valt att lösa det på då x)

Lägg varje postInFeed och postReplyContainer i en wrapper-div sen kan du istället för children() använda parent(). Se:

http://api.jquery.com/parent/

t.ex.

<div class="postWrapper">
<div class="postInfeed">
</div>
<div class="postReplyContainer">
</div>
</div>

Detta innebär att om du tar parent på postInFeed så får du postWrappern. Glöm inte att använda $(this) återigen för att få det element som triggade eventet.

Du måste konstruera ytterligare pyloner

bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
Trådskapare
0
Svar till SkalmanOnDrugs [Gå till post]:
$('.postInFeed').click(function() {
$('.postWrapper').children('.postReplyContainer').toggleClass('postReplyVisible');
});

försökte med detta, den öppnar alla ändå :/

Nu ligger dom som du sa:
<div class="postWrapper">
<div class="postInfeed">
</div>
<div class="postReplyContainer">
</div>
</div>


Tillägg av bunny 2013-06-08 23:46

$('.postInFeed').click(function() {
$('.postWrapper').children([2]).toggleClass('postReplyVisible');
});

Samma med den där



Tillägg av bunny 2013-06-08 23:47

Nu fick jag det att fungera!

$('.postWrapper').click(function() {
$(this).children([2]).toggleClass('postReplyVisible');
});

Tack för hjälpen <3

Ingen status

SkalmanOnDrugs
Visningsbild
P 35 Göteborg Hjälte 2 758 inlägg
0

Svar till bunny [Gå till post]:
Självklart fungerar inte detta x)

$('.postInFeed').click(function() {
$('.postWrapper').children([2]).toggleClass('postReplyVisible');
});


$('.postWrapper') anropar ju varje div med klassen postWrapper. Det var inte så jag sa :P Därför jag sa att du behöver använda $(this) för att den anropar elementet som triggade eventet x)

Aja vsg ^^

Du måste konstruera ytterligare pyloner

bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
Trådskapare
0

Svar till SkalmanOnDrugs [Gå till post]:
hmm.. inuti <div class="postReplyContainer"> ligger en textarea, när man trycker på den så åker ju diven tillbaka igen :/

Måste fixa det på nått sett som

"trycker på postContainer" -> hoppar upp ett snäpp till "postWrapper" -> "väljer child 2" vilket är "postReplyContainer"

is that possible?

Ingen status

SkalmanOnDrugs
Visningsbild
P 35 Göteborg Hjälte 2 758 inlägg
0

Svar till bunny [Gå till post]:
""trycker på postContainer" -> hoppar upp ett snäpp till "postWrapper" -> "väljer child 2" vilket är "postReplyContainer""

För att hoppa upp till wrappern använder du bara parent().

Du måste konstruera ytterligare pyloner

bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
Trådskapare
0
Svar till SkalmanOnDrugs [Gå till post]:
Då vill jag att detta ska fungera, vilket det inte gör :/

$('.postContent').click(function() {
$(this).parent().children([2]).toggleClass('postReplyVisible');
});


Tillägg av bunny 2013-06-09 01:33

$('.postContent').click(function() {
$(this).parents('.postWrapper').children([2]).toggleClass('postReplyVisible');
});

Det där fungerade tydligen, solved



Tillägg av bunny 2013-06-09 01:34

En annan grej. det går inte att lägga på ease-in-out på postReplyVisible / postReplyContainer i cssen.

postReplyContainer är som standard width: 0px;
och postReplyVisible gör den width: auto !important;

Går det att animera på något sett? så den glider ut

Ingen status

SkalmanOnDrugs
Visningsbild
P 35 Göteborg Hjälte 2 758 inlägg
0

Svar till bunny [Gå till post]:
Animationer kan du gixa med jQuery. Beror lite på vad det är för sorts animation du vill ha men googla på jQuery slide eller jQuery fade animations. Finns nog någon trevlig färdig animation som du kan låna.

Du måste konstruera ytterligare pyloner

bunny
Visningsbild
P 29 Hjälte 1 272 inlägg
Trådskapare
0

Svar till SkalmanOnDrugs [Gå till post]:
Jag har hållt på en del med animationer. Men i detta fallet fungerar det inte att animera heighten tex. Eftersom heighten är auto. Och varierar i storlek.

Jag har ett nytt litet problem!

$(document).ready(function(){
$('.box1').click(function() {
$('.box2').slideToggle(200);
$('.box2').animate({display: 'block'});
});
});

När jag trycker var som helst inuti "box2" så åker den tillbaka in. Jag har inte sagt åt den att göra detta. Varför händer det?

Ingen status


Forum » Datorer & IT » Webbutveckling & Programmering » Jquery

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons