나는 HTML이 JSFiddle 예를 구현하고 파일

된 .js 어떻게

문제의 JSFiddle의 예는 http://jsfiddle.net/3vPgY/10/나는 HTML이 JSFiddle 예를 구현하고 파일

내가 복사하고 내 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 파일에는 이미 일부 자바 스크립트가 있으며 .js 파일은 HTML 파일에 포함되어 있습니다. 그것은 작동해야하고, 내가 뭘 잘못하고 있는지 모른다.

출처

2014-01-15 Black

그냥 '$ (문서) .ready에 JS 코드 랩 (함수() { });이처럼' –

? var selectColour =var selectColour = 0 (문서) .ready (함수 if (refine! = 0) { var everythingRefined = everything.clone (true) .find ('옵션 : 선택됨')이 .val() } else {(모든 항목)} (선택 사항) {0} {{모든 항목}} { $ ('# everything'). attr ('disabled', 'disabled'); } }); }); ' – Black

Ew, terrible formatting – 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>

--EDIT--

당신의 코멘트 :

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

완벽하게 작동했는데 jQuery를 가져와야하는 것을 CDN에서 가져 오거나 포장해야한다는 것을 알지 못했습니다. 감사합니다. 모든 자바 스크립트를 별도의 .js 파일에 보관 한 다음 가져 와서 작동하도록하는 방법이 있습니까? – Black

봐 편집 할 수 있습니다. –

편집 파일을 설정하는 방법으로 작동하지만 자바 스크립트를 변경하면 첫 번째 상자를 다른 색으로 바꾼 다음 두 번째 상자를 바꿀 때 버그를 만드는 것처럼 보였다. 그 중 하나를 선택하고 첫 번째 상자를 다시 변경하십시오. 두 번째 상자는 옵션 표시를 중지합니다. – Black

-1

"jQuery"를 포함하는 것을 잊었습니까?

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

출처

2014-01-15 06:39:57

난 당신이 변화 방법의 내부에이 라인

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

을 유지하기 위해 필요가 있다고 생각합니다. 변경 기능 내부에서 console.log (다)를 수행하여 모든 것이 변경 기능 내부에 정의되어 있는지 확인하십시오.

희망이 유용합니다.

출처

2014-01-15 06:51:39 gokul

나는 HTML이 JSFiddle 예를 구현하고 파일

답변

관련 문제