Как изменить текст слайдера?

У меня есть стандартный переключатель выбора. И я хочу изменить текст конкретной опции после загрузки страницы (готов). Значение изменено, но оно не обновляется в представлении пользовательского интерфейса браузера. 'refresh' и change() не помогают.Как изменить текст слайдера?

<script type="text/javascript"> 
    $("#set_slider option[value='0']").text('before') ; 
    $("#set_slider").change(); 

    function clickz() { 
     $("#set_slider option[value='0']").text('after') ; 
     $("#set_slider").change(); 
     $("#set_slider").slider('refresh'); 
     $("#txt").html($("#set_slider option[value='0']").text()); 
    } 
</script> 

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" > 
    <option value="0" >SET</option> 
    <option value="1" >OFF</option> 
</select> 

<div id=txt></div> 
<input type='button' onclick='clickz();' value='Update'/>

это один не работает, а также:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 
    <div data-role="page" id="page2"> 
    <div data-role="header"><h1>Header</h1></div> 
    <div data-role="content"> 
     <select name="set_slider" id="set_slider" data-role="slider" data-mini="false" > 
      <option value="0" >SET</option> 
      <option value="1" >OFF</option> 
     </select> 
    </div> 
     <div id=txt></div> 
    <input type='button' onclick='clickz();' value='Update'/> 
    <div data-role="footer"> 
     <h1>Footer</h1> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).delegate('#page2', 'pageshow', function (event, ui) { 
     $("#set_slider").change(); 
     $("#set_slider").slider('refresh'); 
    }); 

    $("#set_slider option[value='0']").text('before'); 
    function clickz() { 
     $("#set_slider option[value='0']").text('after'); 
     $("#txt").html($("#set_slider option[value='0']").text()); 
     $.mobile.changePage('#page2'); 
    } 
</script> 

</body> 
</html>

источник

2012-06-27 user1464277

@casperOne Я не понимаю, почему это было закрыто? Это правильный вопрос. jQM генерирует HTML-код слайдера, OP просто спрашивал, как изменить текст на слайдере, что не очевидно при этом. –

@PhillPafford Очень сложно сказать, что пытался попробовать ОП. Это похоже на дамп кода и «как это сделать», что совпадает с «gimme the codez», который закрывается как NARQ на SO. – casperOne

@PhillPafford. Его также репост и дубликат, ОП задал вопрос раньше, часть, где OP, обозначенная как «также не работает», была фактически снята с ответа, который я опубликовал (где я также добавил рабочий jsfiddle). – Jack

ли что-то нравится эта работа?

http://jsfiddle.net/LgLPu/

$('#set_slider').bind('change', function() { 
    var activeLabel = $('span.ui-slider-label'); 
    var mySlider  = $(this); 
    var text   = mySlider.find('option:selected').text(); 
    var new_set  = 'Before'; 
    var new_off  = 'After'; 

    // changing the text does nothing 
    //mySlider.find('option[value="0"]').text(new_set); 
    //mySlider.find('option[value="1"]').text(new_off); 

    // You need to update the ui-slider-label spans 
    if(mySlider.val() == 0) { 
     activeLabel.text(new_set); 
    } else { 
     activeLabel.text(new_off);   
    } 

    mySlider.slider('refresh'); // .trigger('create') 
});

HTML

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" > 
    <option value="0" >SET</option> 
    <option value="1" >OFF</option> 
</select> 

<!-- 
This is generated form the slider element: 

<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 40.173913043478265%; ">OFF</span> 
-->

источник

2012-06-27 18:49:05

он работает, но ony, если у вас есть один слайдер на странице (как $ ('span.ui-slider-label'). Text ('new') изменит его для всех слайдеров и просто нужно позаботиться о ручной смене он все время, когда он меняет текст для всех случаев (вкл./выкл.) – user1464277

@ user1464277, вам нужно пройти по DOM, чтобы найти Child/parent/sibling, чтобы найти точную метку/диапазон/текст, который вам нужно изменить –

Как изменить текст слайдера?

ответ

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