用jQuery UI滑塊更新文本

Question

我正在使用jquery UI滑塊來顯示文本旁邊的值，但我需要根據滑塊的值在單數和複數之間更新文本。目前文本是靜態的，因此它可能會顯示「1個浴室」而不是「1個浴室」。無論如何，我可以根據滑塊的值來替換這段文字嗎？

我可以用這個switch語句完成它，但由於某種原因它打破了我的頁面佈局，它需要我爲每個值聲明一個case。 switch語句是下面和原來不變的代碼是進一步下跌：

$(".bedSlider").on("slide", function(event, ui){ 

    switch (ui.values[0]) { 
     case 0: 
     $(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom'); 
     break; 
     case 1: 
     $(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom'); 
     break; 
     case 2: 
     $(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedrooms'); 
     break; 
     case 3: 
     $(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedrooms'); 
     break; 
     case 4: 
     $(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedrooms'); 
     break; 
    } 

    switch (ui.values[1]) { 
     case 0: 
     $(".bed2").replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedroom'); 
     break; 
     case 1: 
     $(".bed2").replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedroom'); 
     break; 
     case 2: 
     $(".bed2").replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedrooms'); 
     break; 
     case 3: 
     $(".bed2").replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedrooms'); 
     break; 
     case 4: 
     $(".bed2").replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedrooms'); 
     break; 
    } 

    }); 

原始

$(".bedSlider").slider({ 
    range: true, 
    min: 0, 
    max: 5, 
    values: [ 1, 4 ], 
    }); 

    $(".bedSlider").on("slide", function(event, ui){ 
    $(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom'); 
    $(".bed2").replaceWith('<div class="bed2 right-search">' + ui.values[1] + ' Bedrooms'); 
    }); 

HTML

 <div class="slider-options clearfix"> 
      <div class="bed1 left-search"><span>1 Bedroom</span></div> 
      <div class="bed2 right-search"><span>4 Bedrooms</span></div> 
     </div> 

     <div class="slide-bg"> 
     <div class="slide-wrap bedSlider"></div> 
     </div> 

Answer 1

也許是這樣的：

$(".bed1").replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom' + (ui.values[0] == 1 ? '' : 's')); 
$(".bed2").replaceWith('<div class="bed2 right-search">' + ui.values[1] + ' Bedroom' + (ui.values[1] == 1 ? '' : 's'));