如何更改滑塊切換文本？

我有一個標準選擇開關。我想在頁面加載（準備好）後更改特定選項的文本。值已更改，但未在瀏覽器用戶界面視圖中更新。 '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生成Slider HTML，OP只是詢問如何更改Slider上的文本，這並不明顯。 –

@PhillPafford很難說出OP的嘗試。它看起來像一個代碼轉儲和「我該怎麼做」，這與「關於作爲NARQ在SO上關閉的」gimme teh codez「相同。 – casperOne

@PhillPafford它也是一個轉貼和一個副本，OP問了以前的問題，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

它可以工作，但是如果你在頁面上有一個滑塊（就像$（'span.ui-slider-label'）.text（'new'）將改變它的所有滑塊並只需要照顧手動改變它始終如一，因爲它改變了所有情況下的文本（開/關） – user1464277

@ user1464277好吧，您需要遍歷DOM來查找子/父/同級以查找需要更改的確切標籤/ span /文本 –

如何更改滑塊切換文本？

回答

相關問題