我想知道是否有人可以提供帮助 - 我有一个简单的 javascript：http ://bnewton.co.uk/freelancer-files/js-fix/
我正在尝试在我的 JS 中使用数据集属性 - 它有效。但是，通常情况下，Safari 不喜欢它。但是，它可以在 FireFox 中使用。有谁知道我错过了什么？
或者，源代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>TITLE GOES HERE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var products = [];
products[0] = new Array ("Spandex Square Top Chair Cover", 2.60), // format: ("PRODUCT NAME", PRICE),
products[1] = new Array ("Metallic Spandex Chair Cover", 3.50),
products[2] = new Array ("Spandex Square Top Chair Cover", 1.20),
products[3] = new Array ("Spandex Lyrca - Cocktail Add-On", 1.15),
products[4] = new Array ("Polyester Table Cover", 10),
products[5] = new Array ("Spandex-Lycra Table Cover", 10),
products[6] = new Array ("Spandex-Lycra Table Decoration Piece Add-On", 5),
products[7] = new Array ("Ceiling Drapes", 30); // to add a new product simply duplicate this last line (and change the number)
</script>
</head>
<body>
<div id="emailForm">
<h2>E-mail Me</h2>
<form action="contact.php" method="post" name="form1" onSubmit="return validate(this)">
<input type='hidden' name='subject' value='THIS IS A TEST SUBJET'/>
<input type='hidden' name='recipient' value='user@domain.co.uk'/>
<ol>
<li>
<label>First Name*</label>
<input type="text" id="firstname" name="firstname"/>
<label>Last Name*</label>
<input type="text" id="lastname" name="lastname"/>
</li>
<li>
<label>Address*</label>
<input type="text" id="address" name="address"/>
</li>
<li>
<label>Suburb*</label>
<input type="text" id="suburb" name="suburb"/>
</li>
<li>
<label>Postcode*</label>
<input type="text" id="postcode" name="postcode"/>
</li>
<li>
<label>Contact Number*</label>
<input type="text" id="number" name="number"/>
</li>
<li>
<label>E-Mail*</label>
<input type="text" id="email" name="email"/>
</li>
<li>
<label>Order Form</label>
</li>
</ol>
<fieldset id="user-selections">
<script type="text/javascript">
count = 0;
function drawProduct(i) {
document.write("<div id='product-line-"+i+"' class='-line'>");
document.write('<select class="product-'+i+'" name="PRODUCT" value="">');
document.write('<option onclick="clearLine('+count+');" selected>--- Order Items ---</option>');
for (i=0; i<products.length; i++) {
document.write("<option class='product-"+i+"' onclick='showPrice(this.dataset.count, "+i+");' data-count='"+count+"' value='"+products[i][0]+"'>"+products[i][0]+"</option>");
$('option.product-'+i).attr("price", products[i][1]);
}
document.write("</select> ");
document.write('<input class="product-price-'+count+'" type="text" name="PRICE" value="" readonly> x ');
document.write('<input class="product-qty-'+count+'" onKeyUp="updateQty(this.dataset.count, this);" data-count="'+count+'" type="text" name="QTY" value="0"> = ');
document.write("<input class='product-line-cost-"+count+"' type='text' name='LINE COST' readonly>");
document.write("</div>");
count++;
}
function clearLine(anchor) {
$('div#product-line-'+anchor+' input:nth-child(2)').val("");
$('div#product-line-'+anchor+' input:nth-child(3)').val("");
$('div#product-line-'+anchor+' input:nth-child(4)').val("");
}
function showPrice(anchor, price) {
clearLine(anchor);
getPrice = $('option.product-'+price).attr("price");
$('div#product-line-'+anchor+' input:nth-child(2)').val("$"+getPrice);
return getPrice;
}
function updateQty(anchor, ele) {
getQTY = $(ele).val();
getPrice = $('div#product-line-'+anchor+' input:nth-child(2)').val().replace("$","");
lineTotal = getQTY*getPrice;
$('div#product-line-'+anchor+' input:nth-child(4)').val("$"+lineTotal);
}
function addMore() {
if(count<15) {
var aFieldset=document.getElementsByClassName('-line');
var cloned=aFieldset[0].cloneNode(true); // fieldset containing select, input & input
var parent=aFieldset[0].parentNode; // form
// re-name
cloned.setAttribute("id", "product-line-"+count);
cloned.getElementsByTagName('select')[0].setAttribute("class", "product-"+count);
options = cloned.getElementsByTagName('option');
for (i=0; i<options.length;i++) {
options[i].setAttribute("data-count", count);
}
cloned.getElementsByTagName('input')[0].setAttribute("class", "product-price-"+count);
cloned.getElementsByTagName('input')[1].setAttribute("class", "product-qty-"+count);
cloned.getElementsByTagName('input')[1].setAttribute("data-count", count);
cloned.getElementsByTagName('input')[2].setAttribute("class", "product-line-cost-"+count);
var aInput=parent.getElementsByTagName('input');
var cInput=cloned.getElementsByTagName('input');
// insert clone
var oDiv=parent.getElementsByTagName('div')[0];
parent.insertBefore(cloned, oDiv);
clearLine(count);
count++;
}
else {
alert('Sorry, there is a maximum of 15 product lines allowed.');
}
}
drawProduct(0);
</script>
</fieldset>
<div style='float: right; margin-left: 415px;'>
Grand Total: <input class='-total' type='text' name='total' value='' readonly>
</div>
<div>
<button type="button" onclick="addMore()">+</button><button type="button" onclick="removeLast();">-</button>
<button type="submit" name="submit">submit</button>
</div>
</script>
</form>
</div>
</body>
</html>