jquery probleempje

Status
Niet open voor verdere reacties.
L

lisa007

Gebruiker
Lid geworden
30 mrt 2012
Berichten
5
Hoi Hoi, Wederom weer iets waar ik niet uit kom.:confused:
Misschien dat iemand hier het antwoord weet op mijn vraag?


Ik probeer een click event toe te voegen als de knop ingedrukt wordt zodat de melding "<p id="soldOut">helaas ze zijn uitverkocht.</p>"
Verschijnt. Helaas lukt het mij niet om een event toe te voegen. via google vond ik al de volgende event-code;
"$("#target").click(function() {
alert("Handler for .click() called.");
});"



Vervolgens de knop hiden met "display:none;" en andersom met de label "helaas ze zijn uitverkocht"
weet iemand misschien hoe ik dit voor elkaar kan krijgen, een beetje hulp kan ik wel gebruiken.:rolleyes:

Heel erg bedankt voor het lezen van mijn vraag(durfde bijna niet mijn vraag te stellen, omdat ik het idee heb dat ik een hele domme vraag stel:confused:)

[JS]<!DOCTYPE html>
<html>
<head>
<title>test jquery</title>
<style>
body {
background-color:#EEEEEE;
padding: 50px;
}

p {
text-align: center;
margin: 5px auto;
padding: 50px;
width: 50%;
font-size: 36px;
font-weight: bold;
font-family: Helvetica, Verdana, Arial;
color: #666666;

border: 10px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

p#cookies{
z-index: -1;
color: #FFFFFF;
margin:20px auto;
padding: 80px 50px;
width: 60%;
border-width: 30px;

background-image: linear-gradient(bottom, rgb(240,124,36) 19%, rgb(255,119,0) 53%, rgb(217,97,32) 92%);
background-image: -o-linear-gradient(bottom, rgb(240,124,36) 19%, rgb(255,119,0) 53%, rgb(217,97,32) 92%);
background-image: -moz-linear-gradient(bottom, rgb(240,124,36) 19%, rgb(255,119,0) 53%, rgb(217,97,32) 92%);
background-image: -webkit-linear-gradient(bottom, rgb(240,124,36) 19%, rgb(255,119,0) 53%, rgb(217,97,32) 92%);
background-image: -ms-linear-gradient(bottom, rgb(240,124,36) 19%, rgb(255,119,0) 53%, rgb(217,97,32) 92%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, rgb(240,124,36)),
color-stop(0.53, rgb(255,119,0)),
color-stop(0.92, rgb(217,97,32))
);


-webkit-animation: myanim 3s infinite; /* Saf5, Chrome */
-moz-animation: myanim 3s infinite; /* FF5+ */
-ms-animation: myanim 3s infinite; /* IE10 */
}

@-webkit-keyframes myanim {
0% { -webkit-transform:rotate(-12deg); }
50% { -webkit-transform:rotate(12deg);
z-index:1;}
100% { -webkit-transform:rotate(-12deg); }
}
@-moz-keyframes myanim {
0% { -moz-transform:rotate(-12deg); }
50% { -moz-transform:rotate(12deg);
z-index:1;}
100% { -moz-transform:rotate(-12deg); }
}
@-ms-keyframes myanim {
0% { -ms-transform:rotate(-12deg); }
50% { -ms-transform:rotate(12deg);
z-index:1;}
100% { -ms-transform:rotate(-12deg); }
}

p#buyNow {

background-image: linear-gradient(bottom, rgb(242,200,34) 19%, rgb(255,232,140) 53%, rgb(219,203,31) 92%);
background-image: -o-linear-gradient(bottom, rgb(242,200,34) 19%, rgb(255,232,140) 53%, rgb(219,203,31) 92%);
background-image: -moz-linear-gradient(bottom, rgb(242,200,34) 19%, rgb(255,232,140) 53%, rgb(219,203,31) 92%);
background-image: -webkit-linear-gradient(bottom, rgb(242,200,34) 19%, rgb(255,232,140) 53%, rgb(219,203,31) 92%);
background-image: -ms-linear-gradient(bottom, rgb(242,200,34) 19%, rgb(255,232,140) 53%, rgb(219,203,31) 92%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, rgb(242,200,34)),
color-stop(0.53, rgb(255,232,140)),
color-stop(0.92, rgb(219,203,31)));

}

p#buyNow:hover {
color:gold;
border-color:gold;

background-image: linear-gradient(bottom, rgb(255,248,122) 0%, rgb(255,255,255) 50%, rgb(252,243,141) 100%);
background-image: -o-linear-gradient(bottom, rgb(255,248,122) 0%, rgb(255,255,255) 50%, rgb(252,243,141) 100%);
background-image: -moz-linear-gradient(bottom, rgb(255,248,122) 0%, rgb(255,255,255) 50%, rgb(252,243,141) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(255,248,122) 0%, rgb(255,255,255) 50%, rgb(252,243,141) 100%);
background-image: -ms-linear-gradient(bottom, rgb(255,248,122) 0%, rgb(255,255,255) 50%, rgb(252,243,141) 100%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,248,122)),
color-stop(0.5, rgb(255,255,255)),
color-stop(1, rgb(252,243,141))
);
}

p#soldOut {
color:#FFFFFF;

background-image: linear-gradient(bottom, rgb(153,43,43) 0%, rgb(245,19,49) 50%, rgb(156,22,29) 100%);
background-image: -o-linear-gradient(bottom, rgb(153,43,43) 0%, rgb(245,19,49) 50%, rgb(156,22,29) 100%);
background-image: -moz-linear-gradient(bottom, rgb(153,43,43) 0%, rgb(245,19,49) 50%, rgb(156,22,29) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(153,43,43) 0%, rgb(245,19,49) 50%, rgb(156,22,29) 100%);
background-image: -ms-linear-gradient(bottom, rgb(153,43,43) 0%, rgb(245,19,49) 50%, rgb(156,22,29) 100%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(153,43,43)),
color-stop(0.5, rgb(245,19,49)),
color-stop(1, rgb(156,22,29))
);

display:none;
}

</style>

</head>
<body>
<p id="cookies">koekjes kopen?</p>
//knop die ingedrukt moet worden.
<p id="buyNow">kopen?</p>
//Melding die moet verschijnen als de knop ingedrukt wordt
<p id="soldOut">helaas ze zijn uitverkocht.</p>
</body>
</html>[/JS]
 
Ach, je kunt onmogelijk van jezelf verwachten dat je dit soort dingen al weet als je net met jQuery (of misschien JavaScript überhaupt?) begint ;)

Goed, laten we beginnen. Als je jQuery gaat gebruiken heb je natuurlijk de jQuery-bibliotheek nodig. De laatste versie vind je via http://jquery.com/ (knopje "Download(jQuery);"). Als je dat script opslaat als jquery-1.7.2.min.js, laad je het op deze manier in je HTML:
HTML: 
...
    <head>
        ...
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        ...
    </head>
...

Je kunt, in plaats van een extern .js bestand laden, ook direct in de script-tag schrijven. In dat geval laat je de src-eigenschap weg.
HTML: 
...
    <head>
        ...
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            //Schrijf hier je Javascript code (event handlers etc)
            //Let er wel op dat de <script>-tag voor jQuery vóór deze komt, anders is jQuery nog niet geladen

        </script>
        ...
    </head>
...

Ik denk dat het het handigst om gewoon wat code te geven. Commentaar staat erbij, en zo'n kort script is toch al redelijk begrijpelijk ;) Lees het maar eens door, en als je iets niet snapt hoor ik het graag!

[JS]$(document).ready(function() { //wacht tot alle elementen geladen zijn

var buyNow = $("#buyNow"); //maakt een jQuery-object voor het element met id="buyNow"
var soldOut = $("#soldOut"); //maakt een jQuery-object voor het element met id="soldOut"

buyNow.click(function() { //wacht tot je op het buyNow-element klikt

buyNow.hide(); //verbergt het buyNow-element
soldOut.show(); //weergeeft het soldOut-element

});
});[/JS]
 
Bedankt voor je tip! Zonder jou was ik de weg helemaal kwijt :thumb:
Heb inmiddels bij bol.com een boek besteld. omdat ik het gebruik van events en functies nogal lastig vind. Het lay-out verhaal heb ik verder wel redelijk on controle.


Maar ik heb inmiddels je code getest en heb het werkend! Ben inmiddels dood moe omdat ik 1000 in de lucht ben gaan springen nadat ik zag dat het werkte.

Achteraf ziet het er inderdaad logisch uit;

bij een klik wordt de code buyNow.click(function() uitgevoerd, en daarna de onderstaande handelingen. Heb er dus veel van geleerd.

Ik durf het bijna niet te vragen maar is er een simpele manier om ipv hide en show. Een css3 animatie te gebruiken voor het hidden en showen.

Groet,
Lisa

:d
 
Haha, blij dat het gelukt is :P

Helaas kan 't niet veel simpeler dan hide en show. Dit zijn al (door jQuery) versimpelde versies van
[JS]document.getElementById("buyNow").style.display = "none"; //en
document.getElementById("soldOut").style.display = "block";[/JS]
Voor zover ik weet kun je CSS3 niet zover krijgen dat het reageert op click-events, maar ik ben geen expert op dat gebied. Misschien weet csshunter er meer over.. Die komt hier ook regelmatig langs :)
 
Geen csshunter, wel That Guy:

CSS3 niet zover krijgen dat het reageert op click-events
Klik om te vergroten...
Met wat valsspelen kan het wel; zie eens hier. Maargoed,

Een css3 animatie te gebruiken voor het hidden en showen.
Klik om te vergroten...
jQuery heeft de mogelijkheid tot leuke animaties dmv. CSS properties; zie bv. hier (en meer algemeen hiero).
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan