如何在html和.js文件中实现此JSFiddle示例

时间:2014-01-15 06:35:12

标签: javascript jquery html css

有问题的JSFiddle示例是http://jsfiddle.net/3vPgY/10/

我将HTML部分复制并粘贴到我的html文件中,并显示两个选择框。

<form>
<select id="refine">
    <option class="default" value="0">Please refine...</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>
<select id="everything" disabled="disabled">
    <option class="default" value="">Please select</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
</select>
</form>

我将css放入我的.css文件中。我将jQuery函数完全复制并粘贴到底部的.js文件中,当我加载页面时,jQuery似乎根本不起作用。

var everything = $('#everything').clone(true);

$('#refine').change(function () {

var selectColour = $('option:selected', this).val().replace(/ /g, "-");

if (refine != 0) {

    var everythingRefined = everything.clone(true).find('.default,.'+selectColour);

    $('#everything').removeAttr('disabled');
    $('#everything').empty().append(everythingRefined);

} else {

    $('#everything').attr('disabled', 'disabled');

}

});

我想知道我是否没有正确地将jQuery放入我的.js文件中。 .js文件已经有一些javascripts,.js文件包含在HTML文件中。它应该工作,我不知道我做错了什么。

3 个答案:

答案 0 :(得分:2)

很多次,小提琴不提供如下细节:

你要将你的JQuery代码包装在:

$(document).ready(function(){ // all Jquery Code. });

但是对于这个

您需要从其CDN导入jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

然后你的JS代码为:

<script type="text/javascript">
$(document).ready(function(){
//all Your JS+Jquery.
});
</script>

所以在你的情况下:它就像:

<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var everything = $('#everything').clone(true);
$('#refine').change(function () {
var selectColour = $('option:selected', this).val().replace(/ /g, "-");
if (refine != 0) {    
    var everythingRefined = everything.clone(true).find('.default,.'+selectColour);
    $('#everything').removeAttr('disabled');
    $('#everything').empty().append(everythingRefined);
} else {    
    $('#everything').attr('disabled', 'disabled');    
}    
});
});
</script>
<style type="text/css">
form {
    padding: 20px;
}
</style>
</head>
<body>
<form>
<select id="refine">
    <option class="default" value="0">Please refine...</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>
<select id="everything" disabled="disabled">
    <option class="default" value="">Please select</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
</select>
</form>
</body>
</html>

- 编辑 -

根据你的评论:

将JS保存在另一个文件中: 创建文件myjs.js(您可以提供任何名称)
将所有JS代码保存在该文件中。 然后使用:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="path/to/myjs.js"></script>
在这种情况下,

myjs.js的内容片段: 档案:myjs.js

var everything; //note change 2
function changer(x){//note change
var selectColour = $('option:selected', x).val().replace(/ /g, "-"); //note change
if (refine != 0) {    
var everythingRefined = everything.clone(true).find('.default,.'+selectColour);
$('#everything').removeAttr('disabled');
$('#everything').empty().append(everythingRefined);
} else {    
$('#everything').attr('disabled', 'disabled');    
}    
}

将您的HTML更改为: 档案filename.html

<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="path/to/myjs.js"></script><!-- Note: Change -->
<style type="text/css">
form {
    padding: 20px;
}
</style>
</head>
<body OnLoad="everything = $('#everything').clone(true);"><!-- Note:change 2-->
<form>
<select id="refine" onChange="changer(this);"> <!-- Note Change -->
    <option class="default" value="0">Please refine...</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>
<select id="everything" disabled="disabled">
    <option class="default" value="">Please select</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
</select>
</form>
</body>
</html>

希望它会帮助你!!干杯!

答案 1 :(得分:2)

我认为你需要保留这一行

var everything = $('#everything').clone(true);

改变方法内部。只需通过在change function中执行console.log(everything)来检查是否在change函数内定义了所有内容。

希望这很有用。

答案 2 :(得分:-1)

你忘了包含“jQuery”吗?

http://code.jquery.com/jquery-latest.min.js