0

わかりました、私はこれにあまりにも長い間取り組んできました。なぜこのように振る舞うかを理解するのを手伝ってください。

以前、似ているが同じではない質問を投稿しました: jquery custom events attached to .show and .hide

その質問に対して、機能するコードを含む回答を受け取りましたが、説明はありませんでした。

必要な機能に関して次のステップに進みましたが、その投稿で提供されたソリューションはこれらの拡張された要件を満たしていません。なぜそのように振る舞うかを理解せずに、そのコードを適応させようとするのに苦労しています。

監視されている要素の可視性が変化したときに、スクリプトで 1 つのイベントをトリガーする必要があります。その要素が明示的に表示/非表示になっている要素であるかどうか、またはその要素に表示/非表示になっている祖先があるかどうか。

したがって、私が監視している他の 2 つの div を含む div の可視性を変更する場合、show/ を呼び出したにもかかわらず、それらの 2 つの内部 div のそれぞれが可視性が変更されたことを示すイベントをトリガーするようにします。祖先の div を非表示にします。

理想的には、コールバックの前にこれらのイベントをトリガーして、変更がユーザーに明らかになる前に影響を受けるコードを実行できるようにしたいと考えています。

シンプルですね。

私が気付いている問題の 1 つは、2 つの例の動作が異なることです。「question2」を操作しても、「madeHidden」はまったくトリガーされないようです。2 つの例の動作は異なります。

これは私がこれまでに持っていたコードで、動作していません。助けてください。

<script type="text/javascript">
    var hiddenBefore;
    var visibleBefore;
    function processRadioButtonASD1() {
        var isChecked = ($("input[name='question1']:checked").val() == "question1.Vermont");
        if (isChecked == true) {
            $("[data-uniquename='question2']").show(250);
        } else {
            $("[data-uniquename='question2']").hide(250);
        }
    }
    function watchVisibilityChange(uniqueName) {
        $("[data-uniquename='" + uniqueName + "']").bind("madeVisible", function () {
            alert($(this).attr("data-uniquename") + " was made visible");
        });
        $("[data-uniquename='" + uniqueName + "']").bind("madeHidden", function () {
            alert($(this).attr("data-uniquename") + " was made hidden");
        });
    }
    function processRadioButtonASD2() {
        var isChecked = ($("input[name='question5']:checked").val() == "question5.Vermont");
        if (isChecked == true) {
            $("[data-uniquename='c']").show(250);
        } else {
            $("[data-uniquename='c']").hide(250);
        }
    }
    $(function () {
        $.each(["show", "hide"], function () {
            var _oldFn = $.fn[this];
            $.fn[this] = function () {
                var _name = $(this).attr("data-uniquename");

                hiddenBefore = $(this).parent().find(":hidden");
                visibleBefore = $(this).parent().find(":visible");

                var result = _oldFn.apply(this, arguments);

                //trigger handler on newly visible elements                    
                hiddenBefore.filter(":visible").each(function () {
                    $(this).triggerHandler("madeVisible");
                });

                //trigger handler on newly hidden elements
                visibleBefore.filter(":hidden").each(function () {
                    $(this).triggerHandler("madeHidden");
                });
                return result;
            }
        });
    });
    $(document).ready(function () {

        watchVisibilityChange("question2");
        watchVisibilityChange("c.question6");
        watchVisibilityChange("c.question7");

        processRadioButtonASD1();
        processRadioButtonASD2();

        //hook up behavior to the appropriate change events
        $("input[name='question1']").change(function () {
            processRadioButtonASD1();
        });
        $("input[name='question5']").change(function () {
            processRadioButtonASD2();
        });
    });
</script>

ここにhtmlがあります。

    <div runat="server" id="promptContent">
    <div id="radioButtonASD" class="oneExample">
        <h2>
            radio button trigger one</h2>
        <div data-uniquename="question1" class="question">
            <label for="question1">
                Question 1) (select Vermont to show question2)
            </label>
            <br />
            <label data-uniquename="question1.Maine">
                <input name="question1" data-uniquename="question1.Maine" type="radio" value="me" />Maine</label><br />
            <label data-uniquename="question1.Vermont">
                <input name="question1" data-uniquename="question1.Vermont" type="radio" value="question1.Vermont" />Vermont</label><br />
            <label data-uniquename="question1.NewHampshire">
                <input name="question1" data-uniquename="question1.NewHampshire" type="radio" value="question1.NewHampshire" />New
                Hampshire</label><br />
            <label data-uniquename="question1.Conneticut">
                <input name="question1" data-uniquename="question1.Conneticut" type="radio" value="question1.Conneticut" />Conneticut</label><br />
            <label data-uniquename="question1.Massachusetts">
                <input name="question1" data-uniquename="question1.Massachusetts" type="radio" value="question1.Massachusetts" />Massachusetts
            </label>
        </div>
        <div data-uniquename="question2" class="question">
            <label>
                Question 2)
            </label>
            <br />
            <select>
                <option data-uniquename="question2.honda" value="honda">Honda</option>
                <option data-uniquename="question2.volvo" value="volvo">Volvo</option>
                <option data-uniquename="question2.saab" value="saab">Saab</option>
                <option data-uniquename="question2.mercedes" value="mercedes">Mercedes</option>
                <option data-uniquename="question2.audi" value="audi">Audi</option>
            </select>
        </div>
    </div>
    <div id="cascadingASD" class="oneExample">
        <h2>
            radio button trigger multiple</h2>
        <div data-uniquename="question1" class="question">
            <label for="question1">
                Question 5) (select Vermont to show question6)
            </label>
            <br />
            <label data-uniquename="question5.Maine">
                <input name="question5" data-uniquename="question5.Maine" type="radio" value="me" />Maine</label><br />
            <label data-uniquename="question5.Vermont">
                <input name="question5" data-uniquename="question5.Vermont" type="radio" value="question5.Vermont" />Vermont</label><br />
            <label data-uniquename="question5.NewHampshire">
                <input name="question5" data-uniquename="question5.NewHampshire" type="radio" value="question5.NewHampshire" />New
                Hampshire</label><br />
            <label data-uniquename="question5.Conneticut">
                <input name="question5" data-uniquename="question5.Conneticut" type="radio" value="question5.Conneticut" />Conneticut</label><br />
            <label data-uniquename="question5.Massachusetts">
                <input name="question5" data-uniquename="question5.Massachusetts" type="radio" value="question5.Massachusetts" />Massachusetts
            </label>
        </div>
        <div data-uniquename="c">
            <div data-uniquename="c.question6" class="question">
                <label>
                    Container Question 6)
                </label>
                <br />
                <select>
                    <option data-uniquename="c.question6.honda" value="honda">Honda</option>
                    <option data-uniquename="c.question6.volvo" value="volvo">Volvo</option>
                    <option data-uniquename="c.question6.saab" value="saab">Saab</option>
                    <option data-uniquename="c.question6.mercedes" value="mercedes">Mercedes</option>
                    <option data-uniquename="c.question6.audi" value="audi">Audi</option>
                </select>
            </div>
            <div data-uniquename="c.question7" class="question">
                <label>
                    Container Question 7)
                </label>
                <br />
                <select>
                    <option data-uniquename="c.question7.honda" value="honda">Honda</option>
                    <option data-uniquename="c.question7.volvo" value="volvo">Volvo</option>
                    <option data-uniquename="c.question7.saab" value="saab">Saab</option>
                    <option data-uniquename="c.question7.mercedes" value="mercedes">Mercedes</option>
                    <option data-uniquename="c.question7.audi" value="audi">Audi</option>
                </select>
            </div>
        </div>
    </div>
</div>

私は本当に解決策が欲しいのですが、ほとんどの場合、これが意図したとおりに機能しない理由を知りたいです。

ご協力ありがとうございました。

4

1 に答える 1

0

私はそれを理解したと確信しています。私は間違いなく理解を深め、髪の毛を抜いて、私が目指していた行動を達成したようです.

        $.each(["hide"], function () {
        var effect = $.fn[this];
        $.fn[this] = function (duration, move, callback) {
            var speed = duration;
            var easing = callback && move || move && !jQuery.isFunction(move) && move;
            var _mainElement = $(this);
            var _mainElementOriginallyVisible = $(this).is(":visible");
            var _visibleChildrenBefore = $(this).find(":visible");
            return effect.call(this, speed, easing, function () {
                if (_mainElementOriginallyVisible == true) { _mainElement.triggerHandler("madeHidden"); }
                _visibleChildrenBefore.each(function () {
                    if (!($(this).is(":visible"))) {
                        if ($(this).attr("data-un") !== undefined) { $(this).triggerHandler("madeHidden"); }
                    }
                });
            });
        };
    });
    $.each(["show"], function () {
        var effect = $.fn[this];
        $.fn[this] = function (duration, move, callback) {
            var speed = duration;
            var easing = callback && move || move && !jQuery.isFunction(move) && move;
            var _mainElement = $(this);
            var _mainElementOriginallyVisible = $(this).is(":visible");
            var _hiddenChildrenBefore = $(this).find(":hidden");
            return effect.call(this, speed, easing, function () {
                if (_mainElementOriginallyVisible == false) { _mainElement.triggerHandler("madeVisible"); }
                _hiddenChildrenBefore.each(function () {
                    if (!($(this).is(":hidden"))) {
                        if ($(this).attr("data-un") !== undefined) { $(this).triggerHandler("madeVisible"); }
                    }
                });
            });
        };
    });

元のコードで私が抱えていた最も顕著な問題は、非同期アニメーションに関するものだったようです。私のコードはアニメーションをトリガーした直後に実行され、それが終了するのを待っていなかったので、非表示にしようとした要素は実際にはコードの次の行に隠されていませんでした..など.

コールバック パラメーターを利用して、アニメーションが完了するのを待ってから実行を続行する必要がありました。

これが私がたどり着いたコードです。きっと洗練できると思います。 このコードを強化する方法についての提案を遠慮なく提供してください。jQuery を始めてまだ 1 週間ほどですが、学びたいと思っています。

要素の可視性を変更するには、表示/非表示以外の方法があることを認識しており、カスタム イベントをトリガーするためにそれらの方法を使用する必要があるという制限に問題はありません。カスタム属性data-un (以前はdata-uniquename ) を持つアイテムのみがイベントをトリガーするという意図的な制限も適用しました。

-トッド

于 2012-05-25T14:45:54.713 に答える