Question

好吧,所以我研究这个已经太久了请帮助我理解为什么它会这样

我先前曾提出一个类似但并非相同的问题:

我收到了对该问题的答复,有些代码有效,但没有任何解释。

在所需功能方面,我接着谈到下一步,而该职位提供的解决办法不能满足这些扩大的要求,我在试图修改该代码时遇到了很多麻烦,我不明白它为何表现得像现在这样。

我希望脚本在任何被监视元素改变可见度时触发一个事件。是否该元素是被明确显示/ 隐藏的元素, 或该元素是否有一个正在显示/ 隐藏的祖先。

所以如果我修改一个Div的能见度, 这个Div包含我正在看的另外两个Divs, 那么我就会喜欢这两个内部Divs的每一个, 来引发一个事件, 表明它们的能见度已经改变, 尽管我已经在祖先Div上叫了表演/隐藏。

最理想的情况是,我希望这些事件在回调前被触发,这样,在用户看到任何变化之前,我可以执行任何受影响的代码。

听起来很简单吧?

我注意到的一个问题就是这两个例子的行为方式不同。问题2的操纵似乎完全没有触发希登。这两个例子的行为不同。

Here s the code I have so far which is not working. Please help.

<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>

我很想找到一个解决办法, 但大多数情况下我想知道为什么事情没有如预期的那样成功。

谢谢你的帮助

Answer 1

I m pretty sure I figured it out. I ve definitely grown my understanding, pulled out some hair, and seem to have achieved the behavior I was aiming for.

        $.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"); }
                    }
                });
            });
        };
    });

我对原始代码最突出的问题似乎与非同步动画有关。我的代码在触发动画后立即执行,没有等待它完成,所以我刚刚试图隐藏的元素实际上并没有隐藏在随后的代码行中。 etc. etc.

我不得不利用回调参数等待动画完成后再继续执行。

This is the code I ve arrived at. I m sure it can be refined. Please don t hesitate to provide suggestions on how to tighten up this code. I m only a week or so into jQuery and I want to learn.

I recognize there are ways other than show/hide to alter the visibility of elements, and I m fine with the limitation that those methods must be used to trigger the custom events. I ve also applied an intentional restriction that only items with my custom attribute data-un (used to be data-uniquename) will trigger the events.

- 陶德

友情链接