Question

我正在使用jquery ui滑块显示文本旁边的值，但我需要根据滑块的值在单数和复数之间更新文本。目前文本是静态的，因此它可能显示“1个浴室”而不是“1个浴室”。无论如何我可以根据滑块的值替换此文本吗？

我能够使用这个switch语句完成它，但由于某种原因它打破了我的页面布局，它要求我为每个值声明一个案例。 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'));

使用jquery ui slider更新文本

1 个答案: