curseur jQuery - slide: function (event, ui) dans la boucle for

J'ai un code simple avec 2 (ou plus) curseurs jQuery:curseur jQuery - slide: function (event, ui) dans la boucle for

HTML:

<label for="ST">ST:</label> 
<input type="text" id="ST" value="10"> 
<div id="slider-ST"></div>   

<label for="DX">DX:</label> 
<input type="text" id="DX" value="10"> 
<div id="slider-DX"></div>

et JS:

$function(){  
$("#slider-ST").slider({ 
    orientation: "horizontal", 
    range: "min", 
    value: 10, 

    slide: function (event, ui) {sliderChange(ui,"#ST");} 
}); 


$("#slider-DX").slider({ 
    orientation: "horizontal", 
    range: "min", 
    value: 10, 

    slide: function (event, ui) {sliderChange(ui,"#DX");} 
}); 

function sliderChange(t, disp) 
{ 
    $(disp).val(t.value); 
}; 
}

Cela fonctionne parfaitement bien.

Maintenant, je veux le rendre plus agréable et je voudrais appeler ces fonctions dans une boucle:

$function(){ 
var ID_Inp = ["#slider-ST", "#slider-DX"];  
var ID_Sli = ["#ST", "#DX"];  
var i; 
for (i=0;i<ID_Inp.length;i++) 
{ 
    $(ID_Inp[i]).slider({ 
    orientation: "horizontal", 
    range: "min", 
    min: 1, 
    max: 18, 
    value: 10, 

    slide: function (event, ui) {sliderChange(ui,ID_Sli[i]);} 
    }); 
}; 
function sliderChange(t, disp) 
{ 
    $(disp).val(t.value); 
}; 
}

Code simplifié également disponible à jsFiddle:

working

not working (using for loop)

Et ce qui se passe est que i est mis à 2 après avoir changé la valeur du curseur et évidemment fonction sliderChange ne fonctionne pas correctement (ID_Sli [i] est undefined).

Des idées?

Source

2017-07-05 Marcin Gałązka

Pouvez-vous donner un JSFiddle qui fonctionne pour vous, ce code ne semble pas fonctionner !! –

Mise à jour du code avec des exemples jsfiddle simples. –

diapositive: function (event, ui) {alert ('#' + ID_Sli [i]); }, en imprimant la valeur de ID_Sli [i] dans la fonction de curseur, il imprime #undefined, cela signifie que les tableaux de noms ne sont pas accessibles depuis la fonction interne. Par conséquent, il n'est pas en mesure de mettre à jour la boîte de saisie. –

Je ne sais pas pourquoi vous auriez besoin d'utiliser une boucle for dans cette situation, cela pourrait être simplifié. L'expansion sur l'idée de Govind, si vous encapsulez les Sliders & entrées dans la division individuelle de:

<div id="bedsSection"> 
    <input type="text" id="amountbeds"> 
    <div id="slider-range-max-beds"></div> 
</div>

Par la suite, en utilisant le même événement, vous pouvez alors interroger le parent pour trouver l'entrée correspondante. Mettre à jour en conséquence.

$("#slider-range-max-beds, #slider-range-max-cars").slider({ 
     range: "max", 
     value: 2, 
     slide: function(event, ui) { 
       var input = $(this).parent().find("input"); 
       input.val(ui.value); 

      //Could also be written as $(this).parent().find("input").val(ui.value); 
     } 
});

Source

2017-07-05 09:58:30 Joel

boucle For n'est pas bonne option pour cela, je pense que vous devez faire comme suit:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script> 
 
    $(function() { 
 
    $("#slider-range-max-cars,#slider-range-max-beds").slider({ 
 
     range: "max", 
 
     value: 2, 
 
     slide: function(event, ui) { 
 
     $("#amountcars").val($("#slider-range-max-cars").slider("value")); 
 
     $("#amountbeds").val($("#slider-range-max-beds").slider("value")); 
 
     } 
 
    }); 
 
    $("#amountcars").val($("#slider-range-max-cars").slider("value")); 
 
    $("#amountbeds").val($("#slider-range-max-beds").slider("value")); 
 
    }); 
 
</script> 
 

 
<body> 
 
    <label for="beds">Minimum number of bedrooms:</label> 
 
    <input type="text" id="amountbeds"> 
 
    <div id="slider-range-max-beds"></div> 
 

 
    <p> 
 
    <label for="cars">Minimum number of cars:</label> 
 
    <input type="text" id="amountcars"> 
 
    <div id="slider-range-max-cars"></div> 
 
    <div id="debug"> 
 

 
    </div> 
 
</body> 
 

 
</html>

Pour plus d'informations lire documention

Source

2017-07-05 09:43:33

Cher Ramakanth,

Merci pour vos réponses. Merci à tous ceux, je compilé le code qui fonctionne bien (et utilise de type de pour, donc je ne pas taper manuellement dans les ID en phase d'initialisation):

<div class="params">  
<div id="STSection"> 
<label for="ST">Strength:</label> 
<input type="text" id="ST" value="10"> 
<div id="slider-ST" style="width:300px;"></div>   
</div> 
<div id="DXSection"> 
<label for="DX">Dexterity:</label> 
<input type="text" id="DX" value="11"> 
<div id="slider-DX" style="width:300px;"></div>   
</div>

et JS:

$('.params div').each(function() { 
     $(this).find("div").slider({ 
     value: $(this).find("input").val(), 
     orientation: "horizontal", 
     slide: function(event, ui) { 
      $(this).parent().find("input").val(ui.value); 
      } 
     }); 
    });

La partie la plus importante pour moi de comprendre était de savoir comment travailler avec .each() qui sont intégrés dans les sections div. Alors évidemment pour utiliser parent() et find(). Ce sont vraiment utiles!

Merci!

Source

2017-07-05 13:33:40

curseur jQuery - slide: function (event, ui) dans la boucle for

Répondre

Questions connexes