/ Forside/ Teknologi / Udvikling / Java Scripts / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
div skifter ikke .class efter .click
Fra : zyferdk
Vist : 1040 gange
200 point
Dato : 20-07-10 14:30

hej folkens

er ved at lave noget portfolio og .js er ikke min stærke side og er nu løbet ind i nogen problemer

http://www.thomasboeriis.dk

Hvis man kigger i toppen af siden er der en dropdown kanp den skifter class når den bliver trykket på første gang men når man vil køre den op igen har den stadig den samme class. hvordan i hulen fixer man den. :)

Min .js kode ser således ud
Kode
<script type="text/javascript">
$(function(){
$("#top_button").click(function(event) {
   $("#top_button").addClass("top_btn_on");
   event.preventDefault();
$(".expand-div").slideToggle();
   

});
$("#top_button div").click(function(event) {
event.preventDefault();
   $("#top_button").removeClass("top_btn_on");
   $("#top_button").addClass("top_btn");
$(".expand-div").slideUp();
   
   
});
});
</script>


 
 
Kommentar
Fra : molokyle


Dato : 22-07-10 11:52

Jeg ved desværre ikke nok om javascript til, at kunne gennemskue din kode

Imidlertid har jeg skrevet denne hjemmestrikkede javascript-løsning til at udskifte et (X-)HTML elements CSS .class egenskaber:

Eks.
Kode
<script type="text/javascript" language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>


I (X-)HTML benyttes scriptet således:
Kode
<div class="original_klasse" id="dette_element" onmouseover="change('dette_element','ny_klasse');" onmouseout="change('dette_element','original_klasse');">
Dette element skifter .class ved onmouseover ..og tilbage ved onmouseout events.
</div>


Man kan selvfølgelig på samme måde benytte eventen onclick ( http://javascript.about.com/library/bltut28.htm )

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 23-07-10 00:07

..og så har du lidt for mange fejl på din side for at dit 'portefølje' virker troværdigt

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thomasboeriis.dk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

</MOLOKYLE>

Kommentar
Fra : zyferdk


Dato : 23-07-10 20:19

Undskyller jeg ikke har svaret men har været lidt væk fra pcén :)

anyway først lige til forsvar til mine errors på w3 valid. Er at W3 valid er en Html, Xhtml validator eks. derfor når alle mine forskellige .js scripts kommer ind over kommer der fejl op etc ("ID "example4" already defined") dette id bruges til at et js script ved hvordan den skal håndtere dette elementet :) og de fleste scripts er nogen der er lavet som er hentet og implementeret eks. http://fancybox.net/

Men har ikke lige formået og få dit js. til at virke til lige netop det jeg vil have nok bare en dum fejl jeg har et helt andet sted :/

Kommentar
Fra : molokyle


Dato : 24-07-10 08:16

Jeg har lavet et eksempel til dig, som du kan arbejde videre med:

http://www.cssboxing.com/temp/shift_class.html

Mht. til din validering ..og andre problemer, kan det skyldes, at du har overset en detalje omkring javascript og XHTML. Nemlig CDATA klausulen i XHTML:

http://www.codehouse.com/javascript/tips/xhtml/

</MOLOKYLE>

Kommentar
Fra : zyferdk


Dato : 24-07-10 21:37

Som du kan se på min side ved jeg allerede godt hvordan man laver en change class men problemet er når man lukker den sammen igen skifter den ikke class :)

Kommentar
Fra : molokyle


Dato : 25-07-10 07:14

Øeh... hvor har du gjort af <![[CDATA ... ]]> i dette script?
Kode
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.expand-div").hide();
});
</script>
<script type="text/javascript">
$(function(){
event.preventDefault();
$("#top_button").click(function(event) {
   $("#top_button").addClass("top_btn_on");
   $(".hire_collapse").slideUp();
   
$(".expand-div").slideToggle();
   

});
$("#top_button div").click(function(event) {
event.preventDefault();
   $("#top_button").removeClass("top_btn_on");
   $("#top_button").addClass("top_btn");
   $(".hire_collapse").slideToggle();
$(".expand-div").slideUp();
   
   
   
});
});
</script>

..som vist var dét, som var anledningen til dit spørgsmål?
</MOLOKYLE>

Kommentar
Fra : zyferdk


Dato : 28-07-10 13:06

Køre Local server inden jeg smider det op så hvis det stadig ikke virker så jeg ingen grund til at smide det op på mit webhotel. men denne tråd er vist kørt lidt offtopic af det som jeg skulle have hjælp med :)

Accepteret svar
Fra : molokyle

Modtaget 100 point
Dato : 30-07-10 19:58

Citat
Hvis man kigger i toppen af siden er der en dropdown kanp den skifter class når den bliver trykket på første gang men når man vil køre den op igen har den stadig den samme class. hvordan i hulen fixer man den.


..off topic ???

Jeg/vi prøver da; at hjæpe dig 'på vej' ...så langt evnerne rækker?

</MOLOKYLE>




Kommentar
Fra : zyferdk


Dato : 01-08-10 11:29

blev nok misforstået lidt, men er taknemmelig for hjælpen du har givet til hvordan man får js til at køre igennem W3 Validator :), som enlig er det eneste jeg har fixet.
Det enlige problem var at den ikke skiftede class når man klikker på den "anden" gang. og tror jeg har kikset i det når jeg har min jQuery med ind over det hele :(

Undskylder også at jeg ikke har kunne være mere aktiv og svare men har haft travlt på arbejdet hvilket også kalder nu :/

Kommentar
Fra : Vektor


Dato : 23-08-10 00:06

(Benyttelse af jQuery herunder)
Har lidt svært ved at se, hvorfor du forsøger med $("#top_button div"), men det er ikke korrekt.

Hvis du vil have 2 eller flere forskellige handlinger (i rækkefølge) til at forekomme, når du klikker på en selector, vil jeg foreslå ".toggle".
Så udfører den skiftevis den ønskede handling.
Se mere på http://api.jquery.com/toggle/

Husk at du kan benytte "$(this)", som selector for det specifikke objekt, der førte til handlingen.

Godkendelse af svar
Fra : zyferdk


Dato : 22-09-10 17:24

Tak for svaret molokyle.

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177551
Tips : 31968
Nyheder : 719565
Indlæg : 6408825
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste