我之前发布了一个类似但不一样的问题：jquery custom events attached to .show and .hide
我收到了对该问题的回复，其中一些代码有效，但没有任何解释。
我已经转到了所需功能的后续步骤，并且该发布中提供的解决方案不满足这些扩展的要求。我在尝试调整代码时遇到了麻烦，却没有理解为什么它的行为方式如此。
我希望脚本在任何观察元素更改可见性时触发一个事件。该元素是否是显式显示/隐藏的元素，或者该元素是否具有显示/隐藏的祖先。
因此，如果我修改包含我正在观看的其他两个div的div的可见性，那么我希望这两个内部div中的每一个触发一个事件，表明他们的可见性已经改变，即使我已经在祖先div上调用show / hide。
理想情况下，我希望在回调之前触发这些事件，这样我就可以在任何变化对用户显而易见之前执行任何受影响的代码。
听起来很简单。？！？
我注意到的一个问题是两个例子表现不同。对'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>
我真的很喜欢解决方案，但大多数情况下我都很想知道为什么这不能按预期工作。
感谢您的帮助。
答案 0 :(得分：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"); }
}
});
});
};
});
我使用原始代码时遇到的最显着的问题似乎是关于异步动画。我的代码在触发动画后立即执行，并且没有等待它完成，因此我试图隐藏的元素实际上并未隐藏在随后的代码行中。等等。
我必须利用callback参数等待动画完成才能继续执行。
这是我到达的代码。我确信它可以改进。 请不要犹豫提供有关如何收紧此代码的建议。 我只有一个星期左右的jQuery，我想学习。
我认识到除了显示/隐藏之外还有其他方法可以改变元素的可见性，我很好地认为必须使用这些方法来触发自定义事件。 我还应用了一个故意限制，即只有使用我的自定义属性 data-un （以前是 data-uniquename ）的项才会触发事件。
-Todd