Comment changer le texte du curseur?

J'ai un commutateur de sélection standard. Et je veux changer le texte de l'option spécifique après le chargement de la page (prêt). La valeur est modifiée mais elle n'est pas mise à jour dans la vue de l'interface utilisateur du navigateur. 'refresh' et change() n'aident pas.Comment changer le texte du curseur?

<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'/>

celui-ci ne fonctionne pas aussi bien:

<!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>

Source

2012-06-27 user1464277

@casperOne Je ne comprends pas pourquoi cela a été fermé? C'est une question valide. jQM génère le Slider HTML, l'OP demandait simplement comment changer le texte sur le Slider qui n'est pas apparent en le faisant. –

@PhillPafford Très difficile de dire ce que l'OP a essayé. Cela ressemble à un vidage de code et "comment je fais cela" qui est le même que "gimme teh codez" qui est fermé comme NARQ sur SO. – casperOne

@PhillPafford C'est aussi un repost et un doublon, le PO a posé la question avant, la partie où le PO marqué comme "ne fonctionne pas" a été levée d'une réponse que j'ai posté (où j'ai également ajouté un jsfiddle de travail). – Jack

Est-ce que quelque chose comme ce travail?

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> 
-->

Source

2012-06-27 18:49:05

cela fonctionne, mais ony si vous avez un curseur sur la page (comme $ ('span.ui-slider-label'). Texte ('nouveau') va changer pour tous les curseurs et juste besoin de prendre soin de changement manuel tout le temps car il change le texte pour tous les cas (on/off) – user1464277

@ user1464277 bien vous devrez traverser le DOM à la recherche de l'enfant/parent/frère pour trouver l'étiquette exacte/span/texte que vous devez changer –

Comment changer le texte du curseur?

Répondre

Questions connexes