为什么我的jQuery ui脚本在wordpress上不起作用?(加载成功，没有任何错误)

Question

Jquery脚本在这里(使用Jquery ui)：

// JavaScript Document
$(document).ready( function(slider) {
$("#amount").val("How many cigarettes do you smoke a day?");
$("#amountb").val("How much do you pay for a 10 pack of cigarettes?");

$( function() {
var t = {
0: "0",
10: "5",
20: "10",
30: "15",
40: "20",
50: "25",
60: "30",
70: "35",
80: "40",
90: "45",
100: "50",
}
var d = {
0: "0",
0.5:"0.5",
1:"1.00",
1.5:"1.5",
2: "2.00",
2.5: "2.50",
3: "3.00",
3.5: "3.50",
4: "4.00",
4.5: "4.50",
5: "5.00",
5.5: "5.50",
6: "6.00",
6.5: "6.50",
7: "7.00",
7.5: "7.50",
}

$("#slider").slider({
value: "0",
min: 0,
max: 100,
step: 10,
slide: function(event, ui) {
var a=$("#price").val(t[ui.value]);
update();
}
});

$("#sliderb").slider({
value: "0",
min: 0,
max: 7.5,
step: 0.5,
slide: function(event, ui) {
$("#priceb").val(d[ui.value]);
update();
}
});

}
);

});
function update()
{
var a=document.getElementById('price').value;
var b=document.getElementById('priceb').value;
var total=((parseFloat(a)*parseFloat(b))*365)/10;
document.getElementById('total').value=""+total;
var c=document.getElementById('total').value;
var viva=parseFloat(c)-(((parseFloat(a)/10)*30)*12);
document.getElementById('viva').value=""+viva;
}

我的html在这里：(注意与上面的脚本相关的带有ID的滑块和滑块的div)

<div class="wrappernew">
<div class="colThree" style="margin: 0px 0 20px 0px; ">
<div id="contenta">
<form method="post" name="quoteme" enctype="multipart/form-data">
<div id="quoteme">
<div id="slider"> </div>
<label for="amount"> </label>
<input name="one" style="width: 400px;" type="text" id="amount" value="0" disabled="disabled" />
<label for="price"> </label>
<input name="onea" type="text" id="price" value="0" disabled="disabled" />
<div id="sliderb"> </div>
<label for="amountb"> </label>
<input name="two" style="width: 400px;"  type="text" id="amountb" value="0" disabled="disabled" />
<label for="priceb"> </label>
<input name="twoa" type="text" id="priceb" value="0" disabled="disabled" />
<p class="pricepara"> You spend £
<label for="total" id="totalprice" style=""> </label>
<input name="totalprice" type="text" id="total" disabled="disabled" style="" />
on cigarettes each year. </p>
<p class="pricepara"> By switching to Viva you could save £
<label for="viva" id="totalprice" style=""> </label>
<input name="totalprice" type="text" id="viva" disabled="disabled" style="" />
each year. </p>
</div>
</form>
</div>
</div>
</div>
</div>

有问题的网站是http://www.vivaelectroniccigarette.com/滑块应该在主页上，然而脚本并没有给HTML留下深刻印象。

我不是程序员，但我想我会自己尝试一下，我在本地工作，但当我把它添加到wordpress时，它就碎了。

我已经在wordpress上加载了与本地相同的脚本，但是我忍不住觉得我在页面上错过了告诉运行脚本的东西？

我们将不胜感激。

根据指令替换$后，这是脚本：

// JavaScript Document
Jquery(document).ready( function(slider) {
Jquery("#amount").val("How many cigarettes do you smoke a day?");
Jquery("#amountb").val("How much do you pay for a 10 pack of cigarettes?");

Jquery( function() {
var t = {
0: "0",
10: "5",
20: "10",
30: "15",
40: "20",
50: "25",
60: "30",
70: "35",
80: "40",
90: "45",
100: "50",
}
var d = {
0: "0",
0.5:"0.5",
1:"1.00",
1.5:"1.5",
2: "2.00",
2.5: "2.50",
3: "3.00",
3.5: "3.50",
4: "4.00",
4.5: "4.50",
5: "5.00",
5.5: "5.50",
6: "6.00",
6.5: "6.50",
7: "7.00",
7.5: "7.50",
}

Jquery("#slider").slider({
value: "0",
min: 0,
max: 100,
step: 10,
slide: function(event, ui) {
var a=Jquery("#price").val(t[ui.value]);
update();
}
});

Jquery("#sliderb").slider({
value: "0",
min: 0,
max: 7.5,
step: 0.5,
slide: function(event, ui) {
Jquery("#priceb").val(d[ui.value]);
update();
}
});

}
);

});
function update()
{
var a=document.getElementById('price').value;
var b=document.getElementById('priceb').value;
var total=((parseFloat(a)*parseFloat(b))*365)/10;
document.getElementById('total').value=""+total;
var c=document.getElementById('total').value;
var viva=parseFloat(c)-(((parseFloat(a)/10)*30)*12);
document.getElementById('viva').value=""+viva;
}

我刚刚向网站推荐添加了上面的脚本，但它仍然没有给html留下深刻印象，在我的本地版本中，脚本用实际的滑块替换了div的"滑块"one_answers"滑块"。

我不确定这是否有任何帮助，但我已经将文件压缩到这里：http://vivaelectroniccigarette.com/wp-content/themes/mystile/js/price_estimator-1.zip文件index.html是它在本地的样子，我在网站上得到的内容可以在：viveelectronicicgarette.com上看到

这是我的头和我加载文件的顺序，这有问题吗？

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php woo_title(''); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php
wp_head();
woo_head();
?>
<link rel="stylesheet" type="text/css" href="http://www.vivaelectroniccigarette.com/wp-content/themes/mystile/js/jquery-ui.css">
<script src='http://www.vivaelectroniccigarette.com/wp-content/themes/mystile/js/jquery-1.6.2.min.js'>
</script>
<script src="http://www.vivaelectroniccigarette.com/wp-content/themes/mystile/js/myscript.js">
</script>
<script src="http://www.vivaelectroniccigarette.com/wp-content/themes/mystile/js/jquery-ui.js">
</script>
</head>

Answer 1

jQuery的全局$快捷方式不可用，由于jQuery的noConflict Wrappers，您可以用jQuery而不是$调用其函数。

请查看此链接了解更多信息。

Answer 2

wordpress调用jQuery.noConflict ()默认情况下，jQuery默认使用$作为jQuery<所以您必须将$替换为jQuery单词。。。。参见此处