PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
O

jQuery help

Door Onbekend Onbekend op 19-10-2008 13:45
1.357 views
Ik gebruik jQuery en daar wil ik bij blijven.

Ik heb een probleem. Ik weet niet hoe ik iets moet aanpakken:
Als ik een header heb en daar op geklikt wordt, moet het content eronder verdwijnen.


<h1 id="page-settings-toggle" class="showhide hidden"><span class="arrow-showhide"><!-- --></span> <span class="icon wrench-icon"><!-- --></span> <img src="i/text/paginainstellingen.png" alt="Pagina instellingen" /></h1>
<div id="page-settings" class="hidden"><!-- deze div moet shown krijgen en de h1 ook en als de class shown is, moeten ze hidden krijgen -->


Ik weet dat je met $(".showhide").bind("click", function bla bla dat kunt beginnen, maar hoe moet ik verder. Hoe kan ik zorgen dat met Javascript bij onclick op de h1 (bijv page-settings-toggle) dat -toggle er af wordt geknipt en dan de div page-settings van class wordt veranderdt?

Thx. Thomas
M
Mitchell
19-10-2008 17:11
Plaats in het begin van je document ready een add class voor #page-settings met daarin de class hidden en wanneer je dan die bind uitvoert remove class hidden.

Zelfde kun je gebruiken voor je page-settings-toggle, dit zet je er in de document ready op en haal je bij de bind er weer vanaf en dan zet je alleen page-settings er op.
O
Onbekend Onbekend
19-10-2008 18:08 
function init() {
	$(".showhide").click.$(":parent div").toggleClass("hidden");
}

$(document).ready(init());


Dat werkt niet. Firebug zegt dat $(element).click.$(element) niet kan. Niet zo gek. Iemand een idee hoe ik dat oplos?
?
Onbekende gebruiker
19-10-2008 18:31
Gewoon gebruik maken van bind en dan this, zoals de voorbeelden?
O
Onbekend Onbekend
19-10-2008 18:51
Nee ik heb het nou anders:

          <div class="showhide-parrent hidden">
            <h1 class="showhide"><span class="arrow-showhide"><!-- --></span> <span class="icon wrench-icon"><!-- --></span> <img src="i/text/paginainstellingen.png" alt="Pagina instellingen" /></h1>
            <div id="page-settings">
knip
            </div>
          </div>

$(".showhide-parrent h1").bind("click", function () { $(":parent").toggleClass("hidden"); } );


Dat werkt ook niet. Maar ik heb dus meerdere van dit soort dingen die op één pagina's moeten. Dus het moet zeg maar dynamisch zijn.

?
Onbekende gebruiker
19-10-2008 19:07
Tommy schreef op 19.10.2008 18:51
Nee ik heb het nou anders:

          <div class="showhide-parrent hidden">
            <h1 class="showhide"><span class="arrow-showhide"><!-- --></span> <span class="icon wrench-icon"><!-- --></span> <img src="i/text/paginainstellingen.png" alt="Pagina instellingen" /></h1>
            <div id="page-settings">
knip
            </div>
          </div>

$(".showhide-parrent h1").bind("click", function () { $(":parent").toggleClass("hidden"); } );


Dat werkt ook niet. Maar ik heb dus meerdere van dit soort dingen die op één pagina's moeten. Dus het moet zeg maar dynamisch zijn.


Parent van wat wil je?
Je moet volgens mij this gebruiken, staat ook op die pagina die ik je gaf:

fn Function
A function to bind to the event on each of the set of matched elements
function callback(eventObject) {
this; // dom element
}
O
Onbekend Onbekend
19-10-2008 19:13
Maar kan dan ook $(this + ":parent") of moet het dan $(this).$(":parent"); zijn?

$(this).parent().toggleClass("hidden"); moet het zijn.

Maar Firebug geeft nu nog de fout:
fn is undefined
jQuery.readyList.push( function() { return fn.call(this, jQuery); } ); line 2295

Ik snap echt niets meer van jQuery..
?
Onbekende gebruiker
19-10-2008 19:15
Tommy schreef op 19.10.2008 19:13
Maar kan dan ook $(this + ":parent") of moet het dan $(this).$(":parent"); zijn?

Ik gok $(this).$(":parent"), maar dat moet je effe uittesten.
Iig moet je gebruik maken van this...
?
Onbekende gebruiker
19-10-2008 19:21
Tommy schreef op 19.10.2008 19:19
Zie mijn edit ;)

Ik snap er niets van.

Dat ziet er uit alsof er wat mis gaat in jQuery. Welke versie heb je? Staat het ergens online?
O
Onbekend Onbekend
19-10-2008 19:24
Nee, Firebug geeft heel vaak een error in jQuery als er wat mis is met je code. Ik heb het lokaal staan, als je een minuutje hebt zal ik het is online pleuren.. ;)

http://gamerswiki.org/layout/

Het is nog het beginnetje van een design dat ik moet uitwerken. Maar ik wil dit even werkend hebben. Als je de pagina opent krijg je meteen de error al. Het gaat om de drie headertjes aan de rechter kant onder de ad (die met de pijltjes).

Reageren

Inloggen om te reageren