0

该代码在 JSFiddle 中运行良好，但当我将其放在 html 文件中时它不起作用。我自己找不到错误。

这是工作链接小提琴演示

下面是不起作用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript">
$('#Checkbox1, #Checkbox2').on('change', function () {
    console.log();
    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
        $('#circle_2').css('background-color', '#999');
    } else {
        $('#circle_2').css('background-color', 'transparent');
    }
});
</script>

<style type="text/css">

#circle_2 {
    border:solid 1px #333;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display:inline-block;
}
#circle {
    border:solid 1px #333;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display:inline-block;
}
.circle_text{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:37px;
    color:#333;
    font-weight:bold;
    }
</style>


</head>

<body>
<!-- Circle 1-->
            <div id="position_1">
                <div id="circle">
                    <p class="circle_text">

                        #1
                    </p>
                </div>
            </div>
            <!-- Circle 2-->
            <div id="position_2">
                <div id="circle_2">
                    <p class="circle_text">

                        #2
                    </p>
                </div>
            </div>

            <br/><br/>

        <input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
        <input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
        <input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
        <input type="checkbox" value="1" id="Checkbox4" name="a4"/> Answer four <br/>
        <input type="checkbox" value="1" id="Checkbox5" name="a5"/> Answer five <br/>
        <input type="checkbox" value="1" id="Checkbox6" name="a6"/> Answer six <br/>
        <input type="checkbox" value="1" id="Checkbox7" name="a7"/> Answer seven <br/>
        <input type="checkbox" value="1" id="Checkbox8" name="a8"/> Answer eight<br/>
        <input type="checkbox" value="1" id="Checkbox9" name="a9"/> Answer nine <br/>
        <input type="checkbox" value="1" id="Checkbox10" name="a10"/> Answer ten <br/>


</body>
</html>

我怀疑我缺少要加载的内容，但无法弄清楚。

4

4 回答 4

5

您需要将 jQuery 代码包装在文档就绪调用中。

$(document).ready(function () {
    $('#Checkbox1, #Checkbox2').on('change', function () {
        console.log();
        if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
            $('#circle_2').css('background-color', '#999');
        } else {
            $('#circle_2').css('background-color', 'transparent');
        }
    });
});

或在结束正文标记之前。您在页面中存在元素之前执行代码。jsFiddle.net 会自动将您的代码包装在文档就绪调用中。

于 2013-09-24T17:10:21.493 回答
1

JSFiddle 在文档准备好时自行执行代码。您必须将其添加到本地文件中。

用这个替换你的Javascript：

$(document).ready(function() {
    $('#Checkbox1, #Checkbox2').on('change', function () {
            console.log();
        if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
            $('#circle_2').css('background-color', '#999');
        } else {
            $('#circle_2').css('background-color', 'transparent');
        }
    });
});
于 2013-09-24T17:13:23.240 回答
1

您的代码在<head>加载时执行，因此复选框尚不存在。用于$(document).ready()在页面加载完成后执行代码，或将代码元素放在代码中使用的元素之后（内部<body>）。

<script type="text/javascript">
$(document).ready(function(){
    $('#Checkbox1, #Checkbox2').on('change', function () {
        console.log();
        if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
            $('#circle_2').css('background-color', '#999');
        } else {
            $('#circle_2').css('background-color', 'transparent');
        }
    });
});
</script>

此外，在 JSFiddle 中，左侧栏中有一个选项可以在onLoad处理程序中执行代码。这是一个默认选项，它也解决了您的问题。这解释了它在 JSFiddle 中的工作。

于 2013-09-24T17:10:58.363 回答
0

将 jQuery 代码包装在文档就绪函数中：

$( document ).ready(function() {
  $('#Checkbox1, #Checkbox2').on('change', function () {
    console.log();
    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
        $('#circle_2').css('background-color', '#999');
    } else {
        $('#circle_2').css('background-color', 'transparent');
    }
});
});

还要确保您有可用的 Internet 连接，因为 jQuery 库是在运行时从服务器加载的。如果您没有互联网，那么您的代码将无法正常工作。

于 2013-09-24T17:15:08.063 回答