2016-05-09 11 views
0

Ich bin neu mit Stiftung zub 6. Ich habe eine JQuery von meinem eigenen geschrieben, um etwas Text zu zeigen und zu verbergen. Aber wenn ich die Jquery in die HTML-Datei hinzufügen, wird es nicht mehr arbeiten (ohne Fundament es funktionierte), so habe ich eine andere Datei custom.js diesen Code namens i in dieser Datei erstellt:Benutzerdefinierte jquery Kombination mit Stiftung

$(document).ready(function(){ 
    $(".afspraak-rij").hide(); 
    $(".offerte-rij").hide(); 

    $(".afspraak").click(function(){ 
     $(".afspraak-rij").show(); 
     $(".offerte-rij").hide(); 
)}; 
    $(".offerte").click(function(){ 
     $(".afspraak-rij").hide(); 
     $(".offerte-rij").show(); 
)}; 
)}; 

In die HTML Datei habe ich unten:

<script src="js/vendor/custom.js"></script> 

Wie kann ich den kleinen Code arbeiten lassen? Diese

ist, was ein Teil des Codes sieht aus wie jetzt:

<!doctype html> 
 
<html class="no-js" lang="en" dir="ltr"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Oefensite Foundation</title> 
 
    <link rel="stylesheet" href="css/foundation.css"> 
 
    <link rel="stylesheet" href="css/app.css"> 
 
    </head> 
 

 
    
 
    <body> 
 

 
    <div class="background" /> 
 
    <div class="background2" /> 
 
\t <div class="row"> 
 
     <div class="large-12 columns"> 
 
      <div class="success callout"> 
 
       <p class="text-center"><strong>Wiek de Laat.</strong><br>Dit is het vernieuwde offerte aanvraag formulier van Wiek de Laat.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
\t \t <div class="large-12 columns"> 
 
\t \t  <h1 class="text-center">Aanvraag Wiek de Laat</h1> 
 
\t \t </div> 
 
    </div> 
 
    
 
<form class="form callout"> 
 
\t <hr /> 
 
\t <div class="row"> 
 
\t \t <div class="large-12 columns"> 
 
\t \t \t <div class="large-12 columns text-center"> 
 
\t \t \t \t <h5><strong>3. Afspraak/offerte</strong></h5> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="large-12 columns"> 
 
\t \t \t \t \t \t <input type="radio" class="afspraak" name="afof" value="afspraak" id="af"><label for="af">Afspraak</label> 
 
\t \t \t \t \t \t <input type="radio" class="offerte" name="afof" value="offerte" id="of"><label for="of">Offerte</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row afspraak-rij"> 
 
\t \t \t \t \t <div class="large-12 columns"> \t \t \t 
 
\t \t \t \t \t \t <h5><strong>Afspraak</strong></h5> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="large-6 columns text-center"> 
 
\t \t \t \t \t \t \t \t <input type="radio" name="metwie" value="destil" id="destil"><label for="destil">Destil product specialist</label> 
 
\t \t \t \t \t \t \t \t <label>Wat is de vraag/behoefte?</label><textarea placeholder="small-12.columns"></textarea> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="large-6 columns text-center"> 
 
\t \t \t \t \t \t \t \t <input type="radio" name="metwie" value="wiek" id="wiek"><label for="wiek">Wiek de Laat adviseur</label> 
 
\t \t \t \t \t \t \t \t <label>Wat is de vraag/behoefte?</label><textarea placeholder="small-12.columns"/></textarea> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row offerte-rij"> 
 
\t \t \t \t \t <div class="large-12 columns"> \t \t \t 
 
\t \t \t \t \t \t <h5><strong>Offerte</strong></h5> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="large-4 columns"> 
 
\t \t \t \t \t \t \t \t <input type="checkbox" name="voorwat" value="aandrijving" id="aandrijving"><label for="aandrijving">Aandrijving</label> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="large-4 columns"> 
 
\t \t \t \t \t \t \t \t <input type="checkbox" name="voorwat" value="vergrendeling" id="vergrendeling"><label for="vergrendeling">Vergrendeling</label> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="large-4 columns"> 
 
\t \t \t \t \t \t \t \t <input type="checkbox" name="voorwat" value="toegangscontrole" id="toegangscontrole"><label for="toegangscontrole">Toegangscontrole</label> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <hr /> 
 

 

 
</form> \t 
 
\t 
 
\t 
 
\t <script src="js/vendor/custom.js"></script> 
 
    <script src="js/vendor/jquery.js"></script> 
 
    <script src="js/vendor/what-input.js"></script> 
 
    <script src="js/vendor/foundation.js"></script> 
 
    <script src="js/app.js"></script> 
 
    </body> 
 
</html>

+0

diese Skript-Datei in Ihrem Code nach jQuery hinzufügen. –

+0

@MuhammadUsman Ich hatte jquery in meinem Code, aber ich löschte es, weil ich Foundation jetzt verwende. Wenn ich Jquery in meinem Code (der gleiche wie zuvor) erstelle, wird es nicht funktionieren. Also das ist das Problem ... –

Antwort

2

custom.js Datei nach jQuery sein sollte. Und Sie haben Tippfehler in Ihrer custom.js-Datei. Sie haben Klammern an falschen Positionen.

<script src="js/vendor/jquery.js"></script> 
<script src="js/vendor/what-input.js"></script> 
<script src="js/vendor/foundation.js"></script> 
<script src="js/app.js"></script> 
<script src="js/vendor/custom.js"></script> 

Und Ihren Code ersetzen mit folgenden:

$(document).ready(function() { 
    $(".afspraak-rij").hide(); 
    $(".offerte-rij").hide(); 

    $(".afspraak").click(function(){ 
     $(".afspraak-rij").show(); 
     $(".offerte-rij").hide(); 
    }); 
    $(".offerte").click(function(){ 
     $(".afspraak-rij").hide(); 
     $(".offerte-rij").show(); 
    }); 
}); 
+0

Aah, das war es ... So einfach haha. Aber warum musst du es unterbringen? –

+0

@j. Cup bcz Ihr Skript verwendet jQuery-Bibliothek, so dass jQuery zuerst kommen muss, sonst wird es nicht funktionieren. –

Verwandte Themen