如何讓我的JQuery工作？

嗨:)我一直在玩javascript，現在想查看JQuery。我仍然需要學習很多東西，所以請好心情:)我從網上拿了一段代碼，現在我正試圖讓它起作用。 Jsfiddle的作品，它只是不想在我的服務器上工作。這裏是代碼：如何讓我的JQuery工作？

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 

<script type="text/javascript" src="http://localhost/play/jquery-2.1.1.min.js"></script> 

<script type="text/javascript" src="jquery-2.1.1.min.js"></script> 

<script type="text/javascript" language="javascript"> 
function getNum(element, attrPrefix) { 
    //set prefix, get number 
    var prefix = attrPrefix; 
    var num = element.attr("id").substring((prefix.length)); 
    return num; 
} 

$(":checkbox").change(function() { 
    var num = getNum($(this), "checkbox_"); 
    if ($(this).is(":checked")) { 
     $("#color_" + num).val($(this).val()); 
    } else { 
     $("#color_" + num).val(""); 
    } 
}); 

</script> 

</head> 

<body> 

<p>Input boxes are populated with value of checkbox when checkbox is checked.</p> 

<p><input type="checkbox" id="checkbox_01" name="checkbox" value="red was checked" />red 01<br /> 
    <input type="checkbox" id="checkbox_02" name="checkbox_02" value="green was checked" />green 02<br /> 
    <input type="checkbox" id="checkbox_03" name="checkbox_03" value="blue was checked" />blue 03</p> 

<table> 
    <tr> 
     <td>color 01<input type="text" id="color_01" name="color_01" /></td> 
    </tr> 
    <tr> 
     <td>color 02<input type="text" id="color_02" name="color_02" /></td> 
    </tr> 
    <tr> 
     <td>color 03<input type="text" id="color_03" name="color_03" /></td> 
    </tr> 
</table> 


<body> 
</html>

無論我更改src，它只是不想讓JQuery thingy工作。我將min文件直接複製到我的wamp prjtect目錄中，名爲play。我用過：

<script type="text/javascript" src="http://localhost/play/jquery-2.1.1.min.js"></script> 

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

請讓我知道我能做些什麼來完成這項工作！在此先感謝:)注意：我是網絡開發人員初學者;）

來源

2014-07-26 jeanna.b

由於RGS已經回答，您需要添加文檔準備包裝器，並確保您只包含一次**的jQuery庫**。最好使用[CDN]（http://jquery.com/download/#using-jquery-with-a-dn）。 – Niklas

將代碼封裝在DOM就緒處理程序中。然後刪除任何一個jQuery的參考文件，否則使用jQuery的CDN庫。

<script src="http://code.jquery.com/jquery-latest.min.js"/>

代碼：

$(document).ready(function(){ 
function getNum(element, attrPrefix) { 
    //set prefix, get number 
    var prefix = attrPrefix; 
    var num = element.attr("id").substring((prefix.length)); 
    return num; 
} 
$(":checkbox").change(function() { 
    var num = getNum($(this), "checkbox_"); 
    if ($(this).is(":checked")) { 
     $("#color_" + num).val($(this).val()); 
    } else { 
     $("#color_" + num).val(""); 
    } 
}); 
});

演示：

http://jsfiddle.net/9fLXL/

來源

2014-07-26 16:51:33 RGS

嘿，非常感謝@RGS，這就像一個魅力:) –

@ jeanna.b，很高興幫助你。不用謝。 – RGS

請嘗試包裝你的js/jQuery代碼在

$(document).ready(function() { 
    //your code here 
});

或

$(function() { 
    //your code here 
});

來源

2014-07-26 16:59:45

如何讓我的JQuery工作？

回答

相關問題