0

スクロール可能なアイテム（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プラグインを見てみましたが、必要なものをサポートしていないようです。

4

1 に答える 1

0

それがあなたが興味を持っている唯一のものであるならば、あなたはおそらく目に見える数字だけをループすることができます

$("#belt figure:visible").each({...});

is()または、可視性に基づいて各図で何かをしようとしている場合は、次の方法を探していると思います。

if ($(this).is(":visible")) {
    //Do something
} else {
    //Do something else
}

編集：あなたが何か他のことを試みていることがわかりました。エリア内に表示されるかどうかを確認したい場合は、別のことを行う必要があります。:visible要素がまたはでない場合はtrueになりdisplay:noneますvisibility:hidden。

したがって、スクロール可能な領域との高さを確認してから、各図のをそれらの数値と照合して、表示されているかどうかを確認する必要がありscrollTopますoffset。

edit2：それはあなたが考えていたようなものですか？

于 2012-05-23T12:07:56.867 に答える