Wie zeigt man Inhalte in jedem Schritt des Bereichs-Schiebereglers?

Question

Beispiel: http://www.jpeg.cz/images/2016/05/05/yZHWJ.jpg

Ich habe ein Problem, wie auf jedem Schritt des Bereichs-Slider

<div id="range-slider"></div> 

<!-- jQuery ui slider --> 
<!-- wrapper of content --> 
<div class="item" id="item1"> 
    <!-- first block of content --> 
    <div class="slider-content"> 
     <span>lorem ipsum:</span> 
     <span class="price">30 000 KČ</span> 
    </div> 

    <!-- second block of content --> 
    <div class="slider-content"> 
     <span>lorem ipsum:</span> 
     <span class="price">30 000 KČ</span> 
    </div> 

    ....... 
</div> 

$("#range-slider").slider({ 
     value: 3, 
     min: 1, 
     max: 5, 
     step: 1, 

     change: function (event, ui) { 
}); 

Answer 1

Es ist besser, eine zugeordnete ID für jeden Inhaltsblock zu setzen. Dann können Sie den dazugehörigen Inhalt zeigen leicht:

<!-- first block of content --> 
<div class="slider-content" id="slider_content_1"> 
    <span>lorem ipsum:</span> 
    <span class="price">30 000 KČ</span> 
</div> 

<!-- second block of content --> 
<div class="slider-content" id="slider_content_2"> 
    <span>lorem ipsum:</span> 
    <span class="price">30 000 KČ</span> 
</div> 

Javascript:

$("#range-slider").slider({ 
    value: 3, 
    min: 1, 
    max: 5, 
    step: 1, 

    change: function (event, ui) { 
     $('.slider-content').hide(); 
     $('#slider_content_' + ui.value).show(); 
    }); 
}); 

Answer 2

Erste ausblenden alle slider-content Elemente mit CSS (display:none;), dann

Inhaltsblock zeigen und entfernen

$("#range-slider").slider({ 
     value: 3, 
     min: 1, 
     max: 5, 
     step: 1, 

     change: function (event, ui) { 
      $('#item1 .slider-content').each(functions(index, element){ 
      if(index == (ui.value - 1)){ 
       $(element).show(); 
      } 
      else{ 
       $(element).hide(); 
      } 
      }); 
});