我有一个可滚动的项目列表(jQuery工具)...... 它一次显示3项/数字,当点击下一个按钮时,它显示3下一个...
我试图做的事情是,我想要做例如调用web服务,当在可滚动区域内显示的项目,在可滚动区域中显示的项目,应该什么也不做 - 只有在单击时下一个按钮,显示3个下一个项目......
我的HTML输出如下所示:
<div id="adbelt">
<div class="ad-container">
<div id="prevnext">
<a class="next carouselbutton"><span>next</span></a>
<a class="prev carouselbutton"><span>prev</span></a>
</div>
<div id="belt">
<div class="scrollable" id="scrollable">
<div class="items">
<figure>
<a target="_blank" title="http://www.dis-play.dk/" href="http://www.dis-play.dk/">
</a>
<figcaption>
<span>Skarp</span>
<div class="fig-text">og lige til</div>
</figcaption>
<input type="hidden" name="ctl10$phadlist_0$hiddenFieldAdGuid" id="ctl10_phadlist_0_hiddenFieldAdGuid" value="B2A276D78E764528900B723F144117A7" />
</figure>
<figure>
<a target="_blank" title="DIS/Play" href="http://www.dis-play.dk">
<img src="~/media/DISPLAY/Default/defaultAdImage.ashx" class="slide-banner" alt="Kaffe" width="300" height="150" />
</a>
<figcaption>
<span>Forbrugsforeningen 2</span>
<div class="fig-text">har det hele</div>
</figcaption>
<input type="hidden" name="ctl10$phadlist_1$hiddenFieldAdGuid" id="ctl10_phadlist_1_hiddenFieldAdGuid" value="75011C876D04465D865B34FA6DC2CBE3" />
</figure>
<figure>
<a target="_blank" title="http://www.dis-play.dk/" href="http://www.dis-play.dk/">
</a>
<figcaption>
<span>Skarp</span>
<div class="fig-text">og lige til</div>
</figcaption>
<input type="hidden" name="ctl10$phadlist_2$hiddenFieldAdGuid" id="ctl10_phadlist_2_hiddenFieldAdGuid" value="B2A276D78E764528900B723F144117A7" />
</figure>
<figure>
<figcaption>
<span></span>
<div class="fig-text"></div>
</figcaption>
<input type="hidden" name="ctl10$phadlist_3$hiddenFieldAdGuid" id="ctl10_phadlist_3_hiddenFieldAdGuid" value="BE7DA9601D4840B981A1E5305E01786F" />
</figure>
<figure>
<a target="_blank" title="DIS/Play" href="http://www.dis-play.dk">
<img src="~/media/DISPLAY/Default/defaultAdImage.ashx" class="slide-banner" alt="Kaffe" width="300" height="150" />
</a>
<figcaption>
<span>Forbrugsforeningen 2</span>
<div class="fig-text">har det hele</div>
</figcaption>
<input type="hidden" name="ctl10$phadlist_4$hiddenFieldAdGuid" id="ctl10_phadlist_4_hiddenFieldAdGuid" value="75011C876D04465D865B34FA6DC2CBE3" />
</figure>
<figure>
<figcaption>
<span></span>
<div class="fig-text"></div>
</figcaption>
<input type="hidden" name="ctl10$phadlist_5$hiddenFieldAdGuid" id="ctl10_phadlist_5_hiddenFieldAdGuid" value="BE7DA9601D4840B981A1E5305E01786F" />
</figure>
</div>
</div>
</div>
</div>
我试过这个:
$("#belt figure").each(function () {
if ($(this).filter(':visible')) {
alert("visible");
//Do something, like calling a webservice
} else {
alert("not visible");
//Dont call webservice
}
});
我试过看jquery.appear插件,但它似乎不支持我想要的东西?
答案 0 :(得分:1)
如果只有你感兴趣的那些
,你可能只能循环显示可见的数字$("#belt figure:visible").each({...});
或者,如果您希望根据每个数字的可见性对某些数据执行某些操作,我认为您正在寻找is()
方法:
if ($(this).is(":visible")) {
//Do something
} else {
//Do something else
}
编辑:我现在看到你正在尝试别的东西。如果您想查看某个区域内是否可见,则需要执行其他操作。如果元素不是:visible
或display:none
,则visibility:hidden
将为真。
所以你需要检查可滚动区域和scrollTop
的高度,然后根据这些数字检查每个数字的offset
,看看它是否可见
edit2:您想到的是like this吗?