我在我的网站中使用 jQuery,我想在某个 div 可见时触发某些操作。
是否可以将某种“可见”事件处理程序附加到任意 div 并在使 div 可见时运行某些代码?
我想要类似以下伪代码的东西:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
alert("do something") 代码在 contentDiv 实际可见之前不应触发。
谢谢。
我在我的网站中使用 jQuery,我想在某个 div 可见时触发某些操作。
是否可以将某种“可见”事件处理程序附加到任意 div 并在使 div 可见时运行某些代码?
我想要类似以下伪代码的东西:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
alert("do something") 代码在 contentDiv 实际可见之前不应触发。
谢谢。
您始终可以添加到原始.show()方法中,这样您就不必在每次显示某些内容或需要它来处理遗留代码时触发事件:
jQuery(function($) {
var _oldShow = $.fn.show;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function() {
var obj = $(this),
newCallback = function() {
if ($.isFunction(oldCallback)) {
oldCallback.apply(obj);
}
obj.trigger('afterShow');
};
// you can trigger a before show if you want
obj.trigger('beforeShow');
// now use the old function to show the element passing the new callback
_oldShow.apply(obj, [speed, newCallback]);
});
}
});
jQuery(function($) {
$('#test')
.bind('beforeShow', function() {
alert('beforeShow');
})
.bind('afterShow', function() {
alert('afterShow');
})
.show(1000, function() {
alert('in show callback');
})
.show();
});
这有效地让您在执行 beforeShow 和 afterShow 的同时仍然执行原始 .show() 方法的正常行为。
您还可以创建另一个方法,这样您就不必覆盖原来的 .show() 方法。
DOM 突变观察者正在解决这个问题。它们允许您将观察者(一个函数)绑定到更改 dom 元素的内容、文本或属性的事件。
随着IE11的发布,各大浏览器都支持这个功能,查看http://caniuse.com/mutationobserver
示例代码如下:
$(function() {
$('#show').click(function() {
$('#testdiv').show();
});
var observer = new MutationObserver(function(mutations) {
alert('Attributes changed!');
});
var target = document.querySelector('#testdiv');
observer.observe(target, {
attributes: true
});
});
<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
没有您可以为此挂钩的本机事件,但是您可以在使用 . 触发功能
例如
//declare event to run when div is visible
function isVisible(){
//do something
}
//hookup the event
$('#someDivId').bind('isVisible', isVisible);
//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
$(this).trigger('isVisible');
});
您可以使用 jQuery 的Live Query 插件。并编写代码如下:
$('#contentDiv:visible').livequery(function() {
alert("do something");
});
然后每次 contentDiv 可见时,“做某事”都会被提醒!
redsquare 的解决方案是正确的答案。
但是作为一个理论中的解决方案,您可以编写一个函数来选择由.visibilityCheck(不是所有可见元素)分类的元素并检查它们的visibility属性值;如果true然后做某事。
之后,应定期使用该setInterval()功能执行该功能。您可以使用clearInterval()成功呼出后停止计时器。
下面是一个例子:
function foo() {
$('.visibilityCheck').each(function() {
if ($(this).is(':visible')){
// do something
}
});
}
window.setInterval(foo, 100);
您还可以对其进行一些性能改进,但是,该解决方案在实际中使用起来基本上是荒谬的。所以...