堆栈内存溢出
  繁体   English   中英

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

[英]How do I implement this JSFiddle example in html and .js files

 原文  2014-01-15 06:35:12  4   3    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文件已经具有一些javascript，并且.js文件包含在HTML文件中。 应该可以，我不知道我在做什么错。

3 个解决方案

解决方案1
 2 已采纳  2014-01-15 06:48:17

很多次Fiddle不提供详细信息，例如：

您必须在其中包装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的内容片段：file： 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更改为：file 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>

希望对您有帮助！！ 干杯！

解决方案2
 2  2014-01-15 06:51:39

我认为你需要保持这条线 

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

更改方法的内部。 只需通过在更改功能内执行console.log（everything）来检查是否在更改功能内定义了所有内容。

希望这是有用的。

解决方案3
 -1  2014-01-15 06:39:57

您忘了包含“ jQuery”吗？ 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 尝试实现JSFiddle示例 如何在jsFiddle中从GitHub添加任意javascript文件？ 我如何获得img单击以使用jsfiddle执行js 如何发布一个在Rails中遇到的麻烦的jsfiddle示例？ 如何在html网页中实现外部js文件？ 如何在 Vue 中正确实现 html/css/js 主题？ 为什么这个 Highcharts jsFiddle 示例的最小气泡大小似乎不正确，我该如何解决？ 你如何把 jsfiddle 放在你的 html 上 如何防止HTML代码覆盖2个js文件？ 如何将 CSS 和 js 文件捆绑到一个 HTML 文件中？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM