如何實現在HTML這個例子的jsfiddle和.js文件

所涉的jsfiddle例子是http://jsfiddle.net/3vPgY/10/如何實現在HTML這個例子的jsfiddle和.js文件

我複製並粘貼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文件中。它應該工作，我不知道我做錯了什麼。

來源

2014-01-15 Black

只是包裝你的JS代碼在 '$（文件）。就緒（函數（）{ }）;' –

喜歡這個？ $（document）.ready（function（）{ var {var everything = $（'＃everything'）。clone（true）; $（'＃refine'）。change（function（）{ var selectColour = $（'option：selected'，this）.val（）。replace（//g，「 - 」）; if（refine！= 0）var everythingRotation = everything.clone（true）.find '.default，。'+ selectColour）; $（'＃everything'）。removeAttr（'disabled'）; $（'＃everything'）。empty（）。append（everythingRefined）; } else { $（'＃everything'）。attr（'disabled'，'disabled'）; } }）; }）;' – Black

Ew，可怕的格式化 – Black

很多時候小提琴不提供類似的細節：

您對換行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代碼保留在該文件中。然後用：中myjs.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：

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>

希望它會幫助你！乾杯！

來源

2014-01-15 06:48:17

這工作完美，我不知道我必須從CDN導入jQuery或包裝它，謝謝。有沒有一種方法可以將所有的javascript保存在單獨的.js文件中，然後導入並使其以這種方式工作？ – Black

有看編輯.. –

該編輯工作，我想如何設置文件，但更改爲JavaScript似乎創建一個錯誤，當您將第一個框更改爲不同的顏色，然後第二個框到其中一個選項，然後再次更改第一個框。第二個框停止顯示選項。 – Black

-1

你忘了加入「jQuery」嗎？

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

來源

2014-01-15 06:39:57

我認爲你需要保留此行

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

改變方法內。只需通過在change函數中執行console.log（everything）來檢查是否所有內容都是在change函數中定義的。

希望這是有用的。

來源

2014-01-15 06:51:39 gokul

如何實現在HTML這個例子的jsfiddle和.js文件

回答

相關問題