使用JQuery显示和隐藏动态DIV

Question

我有以下HTML

<div style="display: block;" id="FeaturedPromo1">
    <img title="Enjoy a refreshing shower" alt="Enjoy a refreshing shower" src="/english/images/spa.jpg">
    <div class="slideshow-br">
        <div class="slideshow-br-controls">
            <a style="display: inline;" title="Prev" href="#" class="slideshow-br-controls-left"></a>
                <span>
                    <a id="active-banner-slide" style="display: inline;" title="Enjoy a refreshing shower" href="#" class="0-banner-button"></a>
                    <a style="display: inline;" title="The comfort of your own" href="#" class="1-banner-button"></a>
                </span>
            <a style="display: inline;" title="Next" href="#" class="slideshow-br-controls-right"></a>
        </div>
    </div>                      
</div>
<div style="display: none;" id="FeaturedPromo2">
    <img title="The comfort of your own Private Suite" alt="The comfort of your own Private Suite" src="/english/images/suites.jpg">
    <div class="slideshow-br">
        <div class="slideshow-br-controls">
            <a style="display: inline;" title="Prev" href="#" class="slideshow-br-controls-left"></a>
                <span>
                    <a style="display: inline;" title="Enjoy a refreshing shower" href="#" class="0-banner-button"></a>
                    <a id="active-banner-slide" style="display: inline;" title="The comfort of your own" href="#" class="1-banner-button"></a>
                </span>
            <a style="display: inline;" title="Next" href="#" class="slideshow-br-controls-right"></a>
        </div>
    </div>                      
</div>

上面的HTML是从DOT NET动态生成的，所以如果你现在看到我有两套相同的HTML和不同的图像，它可以更多地根据在页面上添加了多少个FeaturedPromo控件，在它上面只有两个。我有"Prev" $('.slideshow-br-controls-left')和"Next" $('.slideshow-br-controls-right')以及PREV和NEXT按钮之间的链接，它们将显示现在选择的图像。

现在我想编写一个将显示下一个DIV的JQuery，我的意思是隐藏当前并在点击“下一步”按钮以及“上一页”按钮时显示下一个div。

请建议！

编辑：

以下是用于生成上述HTML的C＃代码：

    int cntShow = 0;

    foreach (FeaturedPromo promo in base.FeaturedPromos)
    {
        //Adding Input Hidden to get all the values from control
        HtmlGenericControl inputHidden = new HtmlGenericControl("input");
        inputHidden.Attributes["type"] = "hidden";
        inputHidden.Attributes["src"] = promo.ImageSource;
        inputHidden.Attributes["alt"] = promo.ImageAlt;
        inputHidden.Attributes["title"] = promo.ImageTitle;
        inputHidden.Attributes["href"] = promo.ImageHref;
        inputHidden.Attributes["height"] = promo.ImageHeight;
        inputHidden.Attributes["width"] = promo.ImageWidth;
        inputHidden.Attributes["header"] = promo.ImageHeader;
        inputHidden.Attributes["subheader"] = promo.ImageSubHeader;
        inputHidden.Attributes["color"] = promo.ImageColor;

        this.Controls.Add(inputHidden);

        //Add specific div for Featured Promo
        Panel div1 = new Panel();
        div1.Attributes["id"] = promo.ID;

        if (cntShow == 0)
        {
            div1.Style["display"] = "block";
        }
        else
        {
            div1.Style["display"] = "none";
        }

        //Adding an Image
        HtmlGenericControl image = new HtmlGenericControl("image");
        image.Attributes["src"] = promo.ImageSource;
        image.Attributes["alt"] = promo.ImageAlt;
        image.Attributes["title"] = promo.ImageTitle;
        div1.Controls.Add(image);

        //Adding two HREF for navigation
        HtmlGenericControl alinkLeft = new HtmlGenericControl("a");
        alinkLeft.Attributes["class"] = "slideshow-control-left";
        alinkLeft.Attributes["href"] = "#";
        alinkLeft.Style["display"]="inline";
        div1.Controls.Add(alinkLeft);

        HtmlGenericControl alinkRight = new HtmlGenericControl("a");
        alinkRight.Attributes["class"] = "slideshow-control-right";
        alinkRight.Attributes["href"] = "#";
        alinkRight.Style["display"] = "inline";
        div1.Controls.Add(alinkRight);

        //Adding Second div
        Panel div2 = new Panel();
        div2.CssClass = "slideshow-b";
        div1.Controls.Add(div2);

        //Adding Third div
        Panel div3 = new Panel();
        div3.CssClass = "slideshow-bl";
        div2.Controls.Add(div3);

        //Adding the A HREF Link
        HtmlGenericControl alink = new HtmlGenericControl("a");
        alink.Attributes["class"] = "slideshow-link";
        alink.Attributes["href"] = promo.ImageHref;
        div3.Controls.Add(alink);

        //Adding the first span                
        HtmlGenericControl span1 = new HtmlGenericControl("span");
        span1.Attributes["class"] = "slideshow-header";
        span1.InnerHtml = promo.ImageHeader;   
        alink.Controls.Add(span1);

        //Adding line break
        alink.Controls.Add(new LiteralControl("<br/>")); 

        //Adding the second span
        HtmlGenericControl span2 = new HtmlGenericControl("span");
        span2.Attributes["class"] = "slideshow-subheader";
        span2.InnerHtml = promo.ImageSubHeader;
        alink.Controls.Add(span2);
        this.Controls.Add(div1);

        if (base.FeaturedPromos.Count > 1)
        {
            //Adding DIV4 for prev and next
            Panel div4 = new Panel();
            div4.CssClass = "slideshow-br";

            //Adding DIV5 inside DIV4
            Panel div5 = new Panel();
            div5.CssClass = "slideshow-br-controls";
            div4.Controls.Add(div5);

            //Adding the PREV A HREF Link
            HtmlGenericControl alinkPrev = new HtmlGenericControl("a");
            alinkPrev.Attributes["class"] = "slideshow-br-controls-left";
            alinkPrev.Attributes["href"] = "#";
            alinkPrev.Attributes["title"] = "Prev";
            alinkPrev.Style["display"] = "inline";
            alinkPrev.Attributes["CurrentDivID"] = promo.ID;                   
            div5.Controls.Add(alinkPrev);

            //Adding the span for prev and next buttons
            HtmlGenericControl span3 = new HtmlGenericControl("span");
            span3.Attributes["class"] = "slideshow-br-control-buttons";
            int count = 0;
            foreach (FeaturedPromo allPromo in base.FeaturedPromos)
            {
                //Adding the All HREF Link for Prev and Next
                HtmlGenericControl aLLlinks = new HtmlGenericControl("a");
                aLLlinks.Attributes["class"] = "" + count + "-banner-button";
                aLLlinks.Attributes["href"] = "#";
                aLLlinks.Attributes["title"] = allPromo.ImageTitle;
                aLLlinks.Style["display"] = "inline";
                if (count == cntShow)
                {
                    aLLlinks.Attributes["id"] = "active-banner-slide";
                }
                span3.Controls.Add(aLLlinks);
                count++;
            }

            div5.Controls.Add(span3);

            //Adding the NEXT A HREF Link
            HtmlGenericControl alinkNext = new HtmlGenericControl("a");
            alinkNext.Attributes["class"] = "slideshow-br-controls-right";
            alinkNext.Attributes["href"] = "#";
            alinkNext.Attributes["title"] = "Next";
            alinkNext.Style["display"] = "inline";
            alinkNext.Attributes["CurrentDivID"] = promo.ID; 
            div5.Controls.Add(alinkNext);
            div2.Controls.Add(div4);
        }
        this.Controls.Add(div1);
        cntShow++;
    } 

请建议是否可以使用代码。

Answer 1

$('#FeaturedPromo1').hide();
$('#FeaturedPromo2').show();

这是你正在寻找的还是我错过了你的问题？

在MKS评论后编辑：

从div中删除下一个prev链接，只添加一次：

<a onclick="Prev();">Prev</a><a onclick="Next();">Next</a>
<script>
var divNumber = 1;

function Prev()
{
    if(divNumber >1)
    {
        $('#FeaturedPromo' + divNumber ).hide();
        $('#FeaturedPromo' + --divNumber).show();
    }
}
function Next()
{

    if ($('#FeaturedPromo' + (divNumber + 1)).exists()) 
    {
        $('#FeaturedPromo' + divNumber).hide();
        $('#FeaturedPromo' + ++divNumber).show();
    }
}
</script>

我没有测试它，但这就是想法。

如果你想做你的作业服务器端，请发布代码以生成div。

Answer 2

如果这是我怀疑的幻灯片，我建议您使用完成的插件来完成您正在尝试的内容。

例如，看看这个：

http://flowplayer.org/tools/scrollable/index.html

完全是你做的。 ：）

希望有所帮助！