0

好的，所以我已经为此工作了太长时间。请帮助我理解为什么它会这样。

我之前在这里发布了一个类似但不一样的问题：jquery custom events attach to .show and .hide

我收到了对该问题的回复，其中包含一些有效的代码，但没有任何解释。

在所需功能方面，我已继续进行下一步，并且该帖子中提供的解决方案不满足这些扩展要求。我在尝试调整该代码时遇到了很多麻烦，但我不明白它为什么会这样。

我希望脚本在任何观察到的元素改变可见性时触发一个事件。该元素是否是显式显示/隐藏的元素，或者该元素是否具有正在显示/隐藏的祖先。

因此，如果我修改包含我正在观看的其他两个 div 的 div 的可见性，那么我希望这两个内部 div 中的每一个都触发一个事件，表明它们的可见性已经改变，即使我已经调用了 show/隐藏在祖先 div 上。

理想情况下，我希望在回调之前触发这些事件，以便我可以在用户看到任何更改之前执行任何受影响的代码。

听起来很简单吧.?!?

我注意到的问题之一是这两个示例的行为不同。对“question2”的操纵似乎根本不会触发“madeHidden”。这两个示例的行为不同。

这是我到目前为止不起作用的代码。请帮忙。

<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 并且我想学习。

我认识到除了显示/隐藏之外还有其他方法可以改变元素的可见性，我对必须使用这些方法来触发自定义事件的限制感到满意。我还故意应用了一个限制，即只有具有我的自定义属性data-un（曾经是data-uniquename）的项目才会触发事件。

-托德

于 2012-05-25T14:45:54.713 回答