Escribo el siguiente código;
var region = $('#inputGroupSelect01').val()
region = $('#inputGroupSelect01').change(function() {
$(this).val()
})
console.log(region)
La consola muestra k.fn.init(1)
. Pero quiero que $(this).val()
actualice el valor de la variable de región. ¿Cómo puedo configurar $(this).val()
en región en caso de cambio?
Editar 1
Quiero esta variable region
en la sección de peligro. de esta manera
var hazardLayer = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
layers: `tajikistan:${region}`,
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer"
});
Quiero el hazardLayer
también en alcance global. No puedo ponerlo dentro del evento change
.
Editar 2
El hazardLayer
se usará en la función de clic de esta manera;
$('#load').click(function () {
hazardLayer.addTo(map);
});
$('#clear').click(function () {
map.removeLayer(hazardLayer);
})
Tengo más de 10 capas como hazardLayer
y siete variables como region
. Necesito un código limpio, así que quiero ambos en el ámbito global.
4 respuestas
Como dijiste, puedes definir que la variable de región esté en un contexto global y disminuir tus líneas de código / complejidad definiendo una función que devuelve una capa basada en una capa pasada.
var region
var currentLayer
var region = $('#inputGroupSelect01').val()
region = $('#inputGroupSelect01').change(function () {
$(this).val()
});
function createLayer(region) {
return L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
layers: `tajikistan:${region}`,
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer"
});
}
$('#load').click(function () {
currentLayer = createLayer(region)
currentLayer.addTo(map);
});
$('#clear').click(function () {
map.removeLayer(currentLayer);
});
$('#inputGroupSelect01').on('change',function(){
var region = $(this).val();
console.log(region);
})
No necesita mantener una variable global para ello. Simplemente obtenga valor cuando lo necesite.
console.log(getRegion())
function getRegion() {
return $('#inputGroupSelect01').val()
}
Sé que la respuesta ya se da en los comentarios, pero para mostrar la prueba efectiva de la respuesta.
Eche un vistazo al siguiente código, como se dijo en la sección de comentarios de la pregunta de @ user2932057,
Región estará disponible globalmente,
Para verificar si el valor region
está actualizado o no, Simplemente puede hacer clic en el botón para ver el valor resultante de region
var region = $('#inputGroupSelect01').val();
var options = {
layers: `tajikistan:${region}`,
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer"
};
var hazardLayer = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", options);
$('#inputGroupSelect01').change(function() {
region = $(this).val();
options.layers = `tajikistan:${region}`;
console.log(region);
});
console.log(region);
$('#load').click(function () {
hazardLayer = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", options);
hazardLayer.addTo(map);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="inputGroupSelect01">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<button id="load">Click Me</button>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.