Отображение и скрытие динамических DIVs с помощью JQuery

у меня ниже HTMLОтображение и скрытие динамических DIVs с помощью JQuery

<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, которые покажут, какое изображение выбрано.

Теперь я хочу написать JQuery, который отобразит следующий DIV, я имею в виду скрыть текущий и показать следующий div нажатием кнопки «Далее», а также кнопкой «Пред.».

Пожалуйста, предложите!

EDIT:

Ниже C# код для генерации HTML выше:

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++; 
    }

Пожалуйста, укажите, если это возможно с кодом позади.

источник

2011-02-02 Manoj Singh

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

Это то, что вы ищете, или я пропустил ваш вопрос?

Отредактировано после комментариев MKS»:

Удалите следующие, ПРЕД ссылки из дивы и добавить их только один раз:

<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.

источник

2011-02-02 09:47:29 morsanu

Спасибо @ Morsanu, я знаю, что это можно сделать, но мой следующий не знает, какой DIV будет скрывать и показывать, поэтому выше решение не будет работать. –

Вы сказали, что генерируете это с помощью кода сервера asp.net. Возможно, вы должны создать действие для каждой следующей и предыдущей ссылок. Или вы можете использовать следующие и предыдущие кнопки из div и использовать только один и поддерживать номер div в переменной. – morsanu

Можете ли вы предложить, как это сделать с приведенным выше примером кода? –

Если это слайд-шоу, как я подозреваю, я бы рекомендовал пойти с готовым плагином для выполнения именно того, что вы пытаетесь сделать.

Взгляните на это, например:

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

ли именно то, что вы делаете. :)

Надеюсь, что это поможет!

источник

2011-02-02 14:08:57

Отображение и скрытие динамических DIVs с помощью JQuery

ответ

Смежные вопросы