自定义 jquery 与基础组合

Question

我是 foundation zurb 6 的新手。我自己写了一个 jquery 来显示和隐藏一些文本。但是，当我将 jquery 添加到 html 文件时，它将不再起作用（没有它起作用的基础），所以我创建了另一个名为 custom.js 的文件，我在此文件中创建了这段代码:

$(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 文件的底部我有这个：

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

我怎样才能让小代码起作用？

这是部分代码现在的样子：

<!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" />
 <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">
  <div class="large-12 columns">
      <h1 class="text-center">Aanvraag Wiek de Laat</h1>
  </div>
    </div>
  
<form class="form callout">
 <hr />
 <div class="row">
  <div class="large-12 columns">
   <div class="large-12 columns text-center">
    <h5><strong>3. Afspraak/offerte</strong></h5>
    <div class="row">
     <div class="large-12 columns">
      <input type="radio" class="afspraak" name="afof" value="afspraak" id="af"><label for="af">Afspraak</label>
      <input type="radio" class="offerte" name="afof" value="offerte" id="of"><label for="of">Offerte</label>
     </div>
    </div>
    <div class="row afspraak-rij">
     <div class="large-12 columns">   
      <h5><strong>Afspraak</strong></h5>
      <div class="row">
       <div class="large-6 columns text-center">
        <input type="radio" name="metwie" value="destil" id="destil"><label for="destil">Destil product specialist</label>
        <label>Wat is de vraag/behoefte?</label><textarea placeholder="small-12.columns"></textarea>
       </div>
       <div class="large-6 columns text-center">
        <input type="radio" name="metwie" value="wiek" id="wiek"><label for="wiek">Wiek de Laat adviseur</label>
        <label>Wat is de vraag/behoefte?</label><textarea placeholder="small-12.columns"/></textarea>
       </div>
      </div>
     </div>
    </div>
    <div class="row offerte-rij">
     <div class="large-12 columns">   
      <h5><strong>Offerte</strong></h5>
      <div class="row">
       <div class="large-4 columns">
        <input type="checkbox" name="voorwat" value="aandrijving" id="aandrijving"><label for="aandrijving">Aandrijving</label>
       </div>
       <div class="large-4 columns">
        <input type="checkbox" name="voorwat" value="vergrendeling" id="vergrendeling"><label for="vergrendeling">Vergrendeling</label>
       </div>
       <div class="large-4 columns">
        <input type="checkbox" name="voorwat" value="toegangscontrole" id="toegangscontrole"><label for="toegangscontrole">Toegangscontrole</label>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <hr />


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

Answer 1

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

自定义 jquery 与基础组合

Custom jquery combination with foundation

html

jquery

zurb-foundation