0

コードは JSFiddle で完全に機能しますが、html ファイルに配置すると機能しません。自分でエラーを見つけることができません。

ここに作業リンクFiddle demoがあります

そして以下は動作していないコードです：

<!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');
        }
    });
});

または body タグの前。要素がページに存在する前にコードを実行しています。jsFiddle.net は、ドキュメントの準備完了呼び出しでコードを自動的にラップします。

于 2013-09-24T17:10:21.493 に答える
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 に答える
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 に答える
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');
    }
});
});

また、jQuery ライブラリは実行時にサーバーから読み込まれるため、インターネット接続が機能していることを確認してください。インターネットがない場合、コードは機能しません。

于 2013-09-24T17:15:08.063 に答える