No estoy seguro si estoy explicando esto bien, pero aquí va ...

Tengo una función que funciona en JQuery para asignar el valor desplegable seleccionado a una variable y luego pasar la variable a una parte diferente del HTML cuando se hace clic en un botón de confirmación.

Aquí hay una versión simplificada del HTML

<p id="t1"></p> 
<select id="selectLevel">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
   <option value="13">13</option>
   <option value="14">14</option>
   <option value="15">15</option>
   <option value="16">16</option>
   <option value="17">17</option>
   <option value="18">18</option>
   <option value="19">19</option>
   <option value="20">20</option>
</select>
<span class="btn" id="confirmLevel">Confirm</span>

Y aquí está el JQuery que usé.

$(document).ready(function() {
    $('#confirmLevel').click(function() {
        var PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

El problema es que si luego intento llamar a la variable PCLevel para otras funciones, no pasa nada. ¿Que me estoy perdiendo aqui? ¿O sería mejor omitir JQuery por completo y simplemente usar Javascript para hacer lo mismo?

11
Alicia 10 may. 2016 a las 05:11

3 respuestas

La mejor respuesta

El problema es que PClevel tiene un alcance dentro del controlador de clics. No se puede acceder al exterior. Para que el código externo vea PClevel, declare afuera y haga que el controlador de clic simplemente lo modifique.

$(document).ready(function() {
    var PClevel; // Code inside the ready handler can see it.

    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

// or

var PClevel; // Now it's a global. Everyone can see it.
$(document).ready(function() {
    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});
12
Joseph 10 may. 2016 a las 02:20

Defina PClevel como Variable global var PClevel; y actualice el var en el cambio de selección para que pueda acceder a él a través de diferentes funciones.

$(document).ready(function() {
  var PClevel;
  PClevel = $("#selectLevel option:selected").text();
  $('#selectLevel').change(function(){
    PClevel = $("#selectLevel option:selected").text();
  });
  $('#confirmLevel').click(function() {
    $('#t1').append('Level ' + PClevel); 
  });
});

Ejemplo de Plnkr: https://plnkr.co/edit/4KsLTahhq146ttwEcX8E?p=preview

Plnkr actualizado con múltiples funciones

0
Sajan Mullappally 10 may. 2016 a las 02:47

Simplemente declare la variable en el alcance global.

var PClevel = '';
$(document).ready(function() {
    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

Valdría la pena leer sobre los ámbitos de JavaScript, ya que son relevantes si está utilizando jQuery o no.

http://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

1
DGS 10 may. 2016 a las 02:19