Kom ihåg mig?
Home Menu

Menu


jQuery load på flera element på en sida? (extremt krånglig fråga ;P)

 
Ämnesverktyg Visningsalternativ
Oläst 2012-06-02, 10:17 #1
JesperA JesperA är inte uppkopplad
Medlem
 
Reg.datum: Jul 2008
Inlägg: 214
JesperA JesperA är inte uppkopplad
Medlem
 
Reg.datum: Jul 2008
Inlägg: 214
Standard jQuery load på flera element på en sida? (extremt krånglig fråga ;P)

Tjenare!

Håller på och uppdaterar min hemsida lite, håller just nu på med bloggdelen och har lite problem.

Allt är uppbyggd på precis samma sätt som alla andra hemsidor typ, varje blogginlägg har denna strukturen:

HTML-kod:
<article class="post">

	<a class="title clicky" href="#" data-url="koenigsegg.php">Koenigsegg Agera R (2012)</a>
	
	<aside>
		<p class="the_comments">3</p>
		<p class="the_time">2 Mar, 2012, 17:39</p>
		<p class="the_category">Car, Koenigsegg</p>
		<p class="the_tags">Bil, Koenigsegg, Koenigsegg Agera R</p>
	</aside>
	
	<section class="minifies">
		<p>Ja, vad skall man säga? Fyfan vad jävla sjuk grym denna bilen...</p>
	</section>
	
	<div class="load expands"></div>

</article><!-- .post, END -->










<article class="post">

	<a class="title" href="#" data-url="hamburger.php">Dubbeldijontacocheeseburgare</a>
	
	<aside>
		<p class="the_comments">3</p>
		<p class="the_time">6 Jan, 2012, 08:30</p>
		<p class="the_category">Dagens mat</p>
		<p class="the_tags">Dijon, Hamburgare, Pommes frites, Senap</p>
	</aside>


	<section class="minifies expands">
		<p>Japp, sjukt gött är det att göra egna hambrugare...</p>
	</section>
	
	<div class="load"></div>

</article><!-- .post, END -->
Länk till testsidan för jQuery load funktionen: http://dev.jespera.se/
Länk till det som är tänkt att laddas in till Koenigsegg inlägget: http://dev.jespera.se/koenigsegg.php
Länk till det som är tänkt att laddas in till Hamburgar inlägget: http://dev.jespera.se/hamburger.php

Iaf, istället för att ladda in en ny sida när man klickar på rubriken (eller en "featured image" som är jämte rubriken) så tänkte jag använda jQuerys .load funktion för att ladda in resten av inlägget. Det fungerar bra som det är nu men tyvärr fungerar bara översta inlägget just nu och om <div class="load"></div> ligger precis efter rubriken, nu är <aside> och <section> ivägen så inget laddas in i load med ovanstående struktur, har testat varenda traversing alternativ i jQuery men får inte till det ändå.

Laddade upp den relevanta koden till jsfiddle om någon har lust att pilla lite:
http://jsfiddle.net/XeTbR/4/

Problem med nuvarande koden
1) jQuery .load funktionen fungerar enbart om <div class="load"></div> ligger precis efter rubriken, ingen div får ligga emellan rubriken och load diven. Vore bra om det fungerade.

2) Lägger jag <div class="load"> under rubriken så fungerar det, men endast data-url från första blogginlägget laddas in oavsett vilket blogginlägg jag trycker på, jag vill ju att den data-url från den rubriken man trycker på laddas in i nästkommande <div class="load">, tex om jag trycker på rubriken för hamburgaren i rubriken ovan så laddas alltid koenigsegg.php in ändå in i Hamburgar blogginläggets <div class="load">

3) Efter att man klickat på en rubrik så laddas ju jQuerys .load funktion in, samtidigt får föregående <article> en till class som heter "expanded", detta gör att att flera element i <article> antingen tas bort (om den har en class om "minifies", eller läggs till, detta sköts via CSS). Problemet är att om man trycker på rubriken igen så skall blogginlägget återgå till sitt normala tillstånd, man kan kalla det "minimerat" (och det gör den som det är nu, om jag INTE använder jQuerys .load funktion, då tas ju "expanded" bort från föregående <article> och inlägget återgår till sitt normala tillstånd), problemet är ju dock att om man trycker på rubriken igen så görs ju ännu en till jQuery .load, detta är ju knappast önskvärt, jag vill inte ta bort det som laddats in med .load, ifall ifall man expanderar igen så slipper allt laddas om. MEN som det är nu, om jag klickar på rubriken som redan har gjort en .jQuery load så fungerar INTE denna jQuery raden " $(this).parent(".post").toggleClass("expanded");", det blir istället en infinity loop typ, den togglar classen jättesnabbt av/på/av/på/av/på osv istället för att bara ta bort classen "expanded" från föregående <article>


Japp det är dom problemen som är nu, har testat i flera dagar nu att lösa det själv men jag får inte till det riktigt. Förstår verkligen om detta är för stort problem för att någon skulle orka hjälpa mig med detta :P Men ja, jag vore sjukt extremt tacksam om någon hade lust att hjälpa mig lite med dessa problemen

Senast redigerad av JesperA den 2012-06-02 klockan 10:22
JesperA är inte uppkopplad   Svara med citatSvara med citat
 


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 16:41.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017