2016-05-09 2 views
0

私はファンデーションのurbで新しいです。 私は自分のjqueryを書いて、いくつかのテキストを表示したり隠したりしています。ファンデーションとのカスタムjqueryの組み合わせ

$(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(); 
)}; 
)}; 

で: しかし、私はhtmlファイルにjqueryのを追加するとき、それは(それが働いていた土台なし)もう動作しませんので、私は、このファイルで作成し、このコードcustom.jsという名前の他のファイルを作成しましたHTMLファイルには、下にこれがあります。

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

litleコードはどのように動作させることができますか?

これは、コードの一部が今のように見えるものです:

<!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

は、あなたのコード内でjQueryの後にこのスクリプトファイルを追加します。 –

+0

@MuhammadUsman私は自分のコードでjqueryを持っていましたが、今は財団を使っているので、私はそれを削除しました。私のコード(前と同じ)でJqueryを作成すると動作しません。だからそれは問題だ... –

答えて

2

Custom.jsファイルはjQueryの後でなければなりません。 また、custom.jsファイルにタイプミスがあります。間違った位置に括弧があります。

<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> 

そして、次を使用してコードを置き換える:

$(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

ああ、これはそれだった...だから簡単に笑。しかし、なぜあなたはそれをその下に置かなければならないのですか? –

+0

@ j。 Cup bczスクリプトがjQueryライブラリを使用しているので、jQueryが最初に来なければなりません。それ以外の場合は動作しません。 –

関連する問題