11

2 つの外部ボタンでブートストラップ スイッチの状態を設定しようとしています。これはコードです。

    <div>
        <input type="checkbox" name="switch" id="switch" value="1" data-on-text="ON" data-off-text="OFF" />
    </div>

    <div>
        <a id="set_on">ON</a>
        <a id="set_off">OFF</a>
    </div>

<script src="assets/jquery.min.js" type="text/javascript"></script>
<script src="assets/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-switch.js"></script>
<script>
    $("#switch").bootstrapSwitch();
    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('setState', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('setState', false);
    });
</script>

スイッチのオンまたはオフのボタンをクリックしても、その状態は切り替わりません。ブラウザのコンソールを見ると、次のエラーが表示されます: TypeError: $(...).bootstrapSwitch is not a function

この方法で関数の外でブートストラップ スイッチの状態を設定しようとすると、次のようになります。

<script>
    $("#switch").bootstrapSwitch();
    $("#switch").bootstrapSwitch('setState', false);
</script>

スイッチがオンの状態に正しく切り替わります。

4

4 に答える 4

20

コードを以下に置き換えてください：

    <script type="text/javascript">
    $( document ).ready(function() {
    $("#switch").bootstrapSwitch();

    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('state', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('state', false);
    });
    });
    </script>
于 2015-12-05T07:42:49.397 に答える
4

$( document ).ready(function() {});次のように、jQuery コードが実行される前にすべての DOM 要素が読み込まれるように、コードをラップしてみてください。

<script>
$( document ).ready(function() {
    $("#switch").bootstrapSwitch();
    $("#switch").bootstrapSwitch('setState', false);
});
</script>

このように完全なスクリプトで使用してみてください-

<script>

 $( document ).ready(function() {
    $("#switch").bootstrapSwitch();
    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('setState', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('setState', false);
    });
});

</script>
于 2015-12-05T07:29:35.650 に答える