Question

嗨:)我一直在玩javascript，现在想看看JQuery。我仍然需要学习很多东西，所以请好好:)我从网上获取了一些代码，现在我正试图让它工作。 Jsfiddle工作，它只是不想在我的服务器上工作。这是代码：

<!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运行起来。我将min文件直接复制到名为play的wamp prjtect目录中。我用过：

<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>

请让我知道我能做些什么来完成这项工作！在此先感谢:)注意：我是一名网络开发人员初学者;）

Answer 1

将您的代码包装在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/

Answer 2

请尝试在

中包装js / jquery代码

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

或

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

如何让我的JQuery工作？

2 个答案: