タグ別アーカイブ: change

パーセントでの背景表示

今回は仕事で使うかも知れないため事前のテストです。
背景に指定したパーセントで色を塗る処理です。
それではやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){

                maxWidth = $('#front_area').width();
                $('#select_box').change( function(){
                    percentNum = $('#select_box').val();
                    $('#percent').text(percentNum);
                    $('#color_bar').css({'width' : percentNum + '%'});
                });

                for (cnt = 0; cnt <= 100; cnt = cnt + 1) {
                    $('#select_box').append('<option value="' + cnt + '">' + cnt + '</option>');
                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #main_area {
                background-color : #cccccc;
                height           : 100px;
                width            : 500px;
                position         : relative;
            }

            .bar {
                position         : absolute;
                height           : 50px;
                width            : 450px;
            }

            #back_bar {
                background-color : #ffffff;
                left             : 25px;
                margin           : 20px auto;
            }

            #color_bar {
                background-color : #ffcccc;
                width            : 0;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="main_area">
                <p><span id="percent">0</span>%</p>
                <div class="bar" id="back_bar">
                    <div class="bar" id="color_bar"></div>
                </div>
            </div>

            <div id="select_area">
                <select id="select_box"></select>
            </div>

        </div>
    </body>
</html>

sample

sample の selectbox にて数値を選んでもらうと指定した数値によって
div の背景の色を変更できます。

実際には他の要素が入るのでもう少し手をかける必要はあります。
まぁ、とりあえずはこんな感じで問題は無いかと思います。
細かい部分は業務で内容を見ながらやる必要がありますね。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

Value を jQuery で変更した際の Change イベント

今回は jQuery で Value 値を変更したときにイベントを発生する方法の調査です。
まぁ、前回「プロパティに関する attr → prop 変更について」の反省を兼ねた内容です。

前回の内容はこんな流れでした。
 1.親となる checkbox のチェック状態を変更する。
 2.子となる checkbox のチェック状態を親と同じ状態に切り替える。
 3.孫となる checkbox のチェック状態を子と同じ状態に切り替える。

ですが、できませんでした。
「親」から「子」の工程は問題なく動作するんですが、「子」から「孫」の工程が動作しません。

前回は特に重要視しなくて、別途「孫」の checkbox を変更する function を実行したんですが・・・
考えれば考えるほど「無駄な処理だなぁ」との考えに至ったため「リベンジ」を行います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var checkAll = false;
                var objArea;

                // All Change Check
                $('#check0').click(function(){
                    checkAll = $(this).prop('checked');
                    $('#check1').prop('checked', checkAll).change();
                    $('#check2').prop('checked', checkAll).change();
                    $('#check3').prop('checked', checkAll).change();
                });

                // Area 1 Change Check
                $('#check1').change(function(){
                    checkBoxChenge(1, $(this).prop('checked'));
                });

                // Area 2 Change Check
                $('#check2').change(function(){
                    checkBoxChenge(2, $(this).prop('checked'));
                });

                // Area 3 Change Check
                $('#check3').change(function(){
                    checkBoxChenge(3, $(this).prop('checked'));
                });

                // Change Data Set
                function checkBoxChenge(areaNo, setFlg){
                    objArea = $('#dispCheck' + areaNo);
                    if (setFlg == true) {
                        objArea.children('input').prop('checked', true);
                    } else {
                        objArea.children('input').prop('checked', false);
                    }
                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #dispArea div {
                margin  : 30px;
                padding : 10px;
                border  : solid 1px #000000;
            }
        --></style>
        
    </head>
    <body>

        <div id="selectArea">
            <input type="checkbox" id="check0" /> Parent Check Cange<br />
        </div>

        <div id="dispArea">

            <div id="dispCheck0">
                <p>Child Area</p>
                <input type="checkbox" id="check1" /> Grandchild Area 1<br />
                <input type="checkbox" id="check2" /> Grandchild Area 2<br />
                <input type="checkbox" id="check3" /> Grandchild Area 3<br />
            </div>

            <div id="dispCheck1">
                <p>Grandchild Area 1</p>
                <input type="checkbox" value="1_1" /> 1<br />
                <input type="checkbox" value="1_2" /> 2<br />
                <input type="checkbox" value="1_3" /> 3<br />
            </div>

            <div id="dispCheck2">
                <p>Grandchild Area 2</p>
                <input type="checkbox" value="2_1" /> 1<br />
                <input type="checkbox" value="2_2" /> 2<br />
                <input type="checkbox" value="2_3" /> 3<br />
            </div>

            <div id="dispCheck3">
                <p>Grandchild Area 3</p>
                <input type="checkbox" value="3_1" /> 1<br />
                <input type="checkbox" value="3_2" /> 2<br />
                <input type="checkbox" value="3_3" /> 3<br />
            </div>

        </div>

    </body>
</html>

sample

如何でしょう。 子の checkbox の変更が、そのまま孫の checkbox に影響しました。

原因は jQuery で 子の checkbox を変更したことでした。
どうも、jQuery で Value 値を変更しても Change イベントは実行されないようです。

対策として、処理の最後に「.change()」をつけることで解決します。
意味としては「対象に対して Change イベントを実行させる」ということですね。
もちろん、Change 以外にも Click など、同様の方法で実行させることができました。

まぁ、これも今までに何度か書いた「個人的にもっと早く知っておきたかった」内容ですね。
自己満足とは言え、心の中のモヤモヤが晴れてスッキリしました。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。