Question

我是基础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>

我如何让litle代码有效？

这就是现在代码的一部分：

＆＃13;

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

＆＃13;

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与粉底相结合

1 个答案: