Question

我一直在使用ExtendStudio的JQuery PowerSlider在网页上旋转图像，并想要检测新图像何时出现。我使用Chrome调试器检查了他们的HTML，并且每个滑块图像始终可见，但父div的不透明度由滑块代码调整。

<div style="opacity: 0; "><img name="slide1_img" src="img1.jpg"></div>
<div style="opacity: 1; "><img name="slide2_img" src="img2.jpg"></div>
<div style="opacity: 0; "><img name="slide3_img" src="img3.jpg"></div> [etc...]

理想情况下，我想要一个脚本来检测适当的div何时可见。我是网络编码和jQuery的新手所以已经审查了包括.live（）,. delegate（）和livequery插件在内的方法，但我不确定我是否正在将它们中的任何一个100％计算出来，但是这是我认为应该起作用的：

$(document).ready(function() {
    $('div:visible > img[name="slide2_img"]').livequery(function() {
        alert("Slide 2 is visible");
    });
});

我想它可能是选择器，livequery，语法或者......的问题的任意组合。另外，我在上面脚本的第二行设置断点，它似乎只在doc就绪时触发一次。我知道livequery很老，显然.live（）和.delegate（）可以更好地检测更改，但jQuery网站上的描述似乎并没有解决我的问题。

非常感谢所有建议。谢谢！

Answer 1

在项目中不使用:visible，请使用:not(:hidden)
就jQuery而言，所有div都可见
您无需检查可见性，您需要检查css('opacity')。使用以下代码：

$('div > img[name="slide2_img"]').on('click',function(){
  var T = $(this), P = T.parent('div');
  if(P.css('opacity') == '0'){
    alert("Slide 2 is not visible");
  }
  else{
    alert("Slide 2 is visible");
  }
});

如何使用jquery检测父元素中的可见性更改

1 个答案: