2017-02-22 105 views
3

我有這個腳本,我已經複製到我的html文件。
當我在小提琴上運行它與我的html結合,它的作品。
但在我的網站上,它沒有。
這是正確的做法,包括它?:Jquery更新不起作用

<!-- SCRIPT TO UPDATE PRICE --> 
<script type="text/javascript>"> 
$('#quantity').change(function(ev){ 
var price = $('#quantity').val() * 0.1; 
$('#price').html((price).toFixed(2)); 
}); 
</script> 

這是怎麼了我有聯繫我的jquery:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

HTML

<!DOCTYPE html> 
<html lang="sv-se"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>ReClam Tryckeri i Uppsala</title> 
<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<nav class="navbar navbar-default"> <!-- Start of navigation menu div --> 
<div class="container"><!-- 1-Start of container div --> 
<!-- Brand and toggle get grouped for better mobile display --> 
<a class="navbar-brand navbar-right" href="../index.php">ReClam Tryckeri</a> 
<div class="navbar-header"><!-- 2-Start of navbar header div --> 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 

</div><!-- 2-End of navbar header div --> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- 3-Start of navbar collapse div --> 
<ul class="nav navbar-nav"> 

<!-- CHECK IF START PAGE ACTIVE OR NOT AND CREATE LINK --> 
<li><a href='../index.php'>Erbjudanden<span class='sr-only'>(nuvarande)</span></a></li><!-- <li><a href="#">Trycksaker</a></li> --> 

<!-- GET TRYCKSAKER MENU --> 
<!-- CHECK IF DROPDOWN ACTIVE OR NOT --> 
<li class='dropdown active'><!-- BUILD THE PARENT MENU (STATIC) --> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Trycksaker<span class="caret"></span></a> 
<ul class="dropdown-menu"> 
<!-- BUILDING THE CHILD ITEMS FROM DATABASE (DYNAMIC) --> 
<li><a href="trycksaker.php?product_id=1">Flyers</a></li> 
<li><a href="trycksaker.php?product_id=2">Affischer</a></li> 
<li><a href="trycksaker.php?product_id=3">Foldrar</a></li> 
<li><a href="trycksaker.php?product_id=4">Broschyrer</a></li> 
<li><a href="trycksaker.php?product_id=5">Visitkort</a></li> 
<li><a href="trycksaker.php?product_id=6">Korrkort</a></li> 
<li><a href="trycksaker.php?product_id=7">Visitkort</a></li> 
</ul> 
<!-- GET SUPPORT MENU --> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Support<span class="caret"></span></a> 
<ul class="dropdown-menu"> 
<li><a href="#">Hur beställer jag?</a></li> 
<li><a href="#">Tryckfiler</a></li> 
<li><a href="#">Villkor</a></li> 
<li role="separator" class="divider"></li> 
<li><a href="#">Kontakta oss</a></li> 
<li role="separator" class="divider"></li> 
<li><a href="#">Om oss</a></li> 
</ul> 
</div><!-- 3-End of navbar collapse div --> 
</nav><!-- End of navigation menu div --><!-- BUILD COLUMN SYSTEM FOR CROSSDEVICE USABILITY --> 
<div class="container"> 
<div class="row"> 
<div class="col-md-1 col-sm-0 col-xs-0"> 
</div> 
<div class="col-md-6 col-sm-0 col-xs-0"> 
<!-- BUILD PRODUCT INFO FROM DATABASE --> 
<article> 
<h3>Flyers</h3> 
<hr><h4 class='text-justify'>Flyers är vår benämning på trycksaker som består av ett plant ark.</h4> 
<!-- SCRIPT TO UPDATE PRICE --> 
<script type="text/javascript>"> 
$('#quantity').change(function(ev){ 
    var price = $('#quantity').val() * 0.1; 
    $('#price').html((price).toFixed(2)); 
}); 
</script> 
<!-- BUILDING THE ATTRIBUTE FORM FOR THE OPTIONS --> 
<hr> 
<form> 
<div class="form-group"> 
<!-- BUILDING THE FIRST OPTION STATIC--> 
<select class="form-control"> 
<option disabled selected value>Välj Format</option> 
<!-- OPTION 1 BUILDING THE CHILD ITEMS FOR THE ATTRIBUTES (DYNAMIC) --> 
<option>A4&nbsp;&nbsp;&nbsp;&nbsp;210x279mm</option> 
<option>A5&nbsp;&nbsp;&nbsp;&nbsp;148x210mm</option> 
<option>A6&nbsp;&nbsp;&nbsp;&nbsp;105x148mm</option> 
<option>A7&nbsp;&nbsp;&nbsp;&nbsp;74x105mm</option> 
<option>A8&nbsp;&nbsp;&nbsp;&nbsp;52x74mm</option> 
<option>Card&nbsp;&nbsp;&nbsp;&nbsp;85x55mm</option> 
<option>High&nbsp;&nbsp;&nbsp;&nbsp;75x210mm</option> 
<option>Stand&nbsp;&nbsp;&nbsp;&nbsp;100x210mm</option> 
<option>Square&nbsp;&nbsp;&nbsp;&nbsp;105x105mm</option> 
<option>Half&nbsp;&nbsp;&nbsp;&nbsp;105x210mm</option> 
<option>Long&nbsp;&nbsp;&nbsp;&nbsp;105x297mm</option> 
<option>Cd&nbsp;&nbsp;&nbsp;&nbsp;120x120mm</option> 
<option>Box&nbsp;&nbsp;&nbsp;&nbsp;148x148mm</option> 
<option>Frame&nbsp;&nbsp;&nbsp;&nbsp;160x160mm</option> 
<option>Dvd&nbsp;&nbsp;&nbsp;&nbsp;183x273mm</option> 
<option>Full&nbsp;&nbsp;&nbsp;&nbsp;210x210mm</option> 
</select> 
<br> 
<!-- BUILDING THE PRINT OPTION STATIC--> 
<select class="form-control"> 
<option disabled selected value>Välj Tryck</option> 
<!-- PRINT OPTION 1 BUILDING THE CHILD ITEMS FOR THE ATTRIBUTES (DYNAMIC) --> 
<option>4+0&nbsp;&nbsp;&nbsp;&nbsp;Ensidigt Färgtryck</option> 
<option>4+4&nbsp;&nbsp;&nbsp;&nbsp;Dubbelsidigt Färgtryck</option> 
</select> 
<br> 
<!-- BUILDING THE SECOND OPTION STATIC--> 
<select class="form-control"> 
<option disabled selected value>Välj Pappersvikt</option> 
<!-- BUILDING THE CHILD ITEMS FOR THE ATTRIBUTES (DYNAMIC) --> 
<option>90g/m²</option> 
<option>115g/m²</option> 
<option>135g/m²</option> 
<option>170g/m²</option> 
<option>250g/m²</option> 
<option>350g/m²</option> 
</select> 
<br> 
<!-- BUILDING THE THIRD OPTION STATIC--> 
<select class="form-control"> 
<option disabled selected value>Välj Papperstyp</option> 
<!-- BUILDING THE CHILD ITEMS FOR THE ATTRIBUTES (DYNAMIC) --> 
<option>Silk</option> 
<option>Gloss</option> 
</select> 
<br> 
<!-- BUILDING THE QUANTITY OPTION STATIC--> 
<select class="form-control" id="quantity" name="quantity" > 
<option disabled selected value>Välj Antal</option> 
<!-- BUILDING THE QUANTITY ATTRIBUTES (DYNAMIC) --> 
<option>250</option> 
<option>500</option> 
<option>750</option> 
<option>1000</option> 
<option>1500</option> 
<option>2000</option> 
<option>2500</option> 
<option>5000</option> 
<option>7500</option> 
<option>10000</option> 
<option>15000</option> 
<option>20000</option> 
<option>25000</option> 
</select> 
<br> 
<!-- CREATE THE INPUT FIELD FOR MARKING --> 
<input type="text" class="form-control" placeholder='Märk din order med ett arbetsnamn. Exempelvis "Inbjudan Fredde"'> 
<br> 
<!-- CREATE THE UPLOAD AND ORDER BUTTON --> 
<label class="btn btn-info btn-file"> 
Bifoga Tryckfiler <input type="file" style="display: none;"><span class="glyphicon glyphicon-upload"></span> 
</label> 
<div style="float: right;"> 
<button class="btn btn-primary">Lägg i varukorgen <span class="glyphicon glyphicon-shopping-cart"></span></button> 
</div> 
<!-- FINISHING THE OPTION FORM --> 
</div> 
<!-- CREATING THE CHOICE ALERT AREA --> 
<hr> 
<div class="alert alert-warning alert-dismissible" role="alert"> 
<button type="button" class="close" data-dismiss="alert"><span>×</span></button> 
Priset uppdateras automatiskt när du gjort dina val ovan. 
</div> 
<div class="alert alert-info" role="alert" id="price" name="price"></div> 

<!-- CREATING THE PRICE AND IMAGE AREA --> 
</div> 
<div class="col-md-5 col-sm-12 col-xs-12"> 
<!-- CREATING THE LINK FOR IMAGE --> 

<img src='../images/Flyers.jpg' alt="Flyers"></div> 
<!-- ADD AN EMPTY DIV RIGHT FOR EMPTY WHITE SPACE ON DESKTOP --> 
<div class="col-md-1 col-sm-0 col-xs-0"> 
</div> 
</div> 
</article> 
</div><!-- End Container Div) --> 
</div> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html> 
+2

您必須將其包裝在文檔就緒功能中。 :D –

+0

我已經這樣做了,我也將腳本移動到標題區域。我有另一個測試jquery在同一頁面上工作,這個腳本正在工作,但這不是。 reclam.se/index2.php - Kaki Sami 9分鐘 –

回答

1

移動內部文件的腳本代碼.ready(function(){..})

<script type="text/javascript>"> 
    $(document).ready(function() { 
     $('#quantity').change(function(ev){ 
     var price = $('#quantity').val() * 0.1; 
     $('#price').html((price).toFixed(2)); 
     }); 
    }) 
</script 
+0

我已經這樣做了,我也將腳本移動到標題區域。我有另一個測試jquery在同一頁面上工作,這個腳本正在工作,但這不是。 http://www.reclam.se/index2.php –