Bootstrap y jQuery se han utilizado juntos para desarrollar aplicaciones web interactivas. Tanto Bootstrap como jQuery son gratuitos y de código abierto, lo que los hace populares entre los desarrolladores. Este artículo trata sobre cómo mostrar y ocultar la división según la entrada del usuario con la ayuda de Bootstrap y jQuery. A continuación se muestran dos enfoques para establecer lo mismo.
Primer enfoque: en el primer método, solo se ve una división a la vez según la entrada del usuario. Este método comprende una lista desplegable con tres opciones. El usuario puede seleccionar una opción a la vez y dependiendo del valor de la opción se muestra la división correspondiente. El método utilizado en el fragmento de código es el siguiente:
- $(documento).ready(función): El evento ready se activa cuando se carga el documento y se ejecuta la función pasada como parámetro.
- $(selector).cambio(función): El evento de cambio se activa cuando el elemento seleccionado (entrada, área de texto o selección) se ha cambiado y se ejecuta la función pasada como parámetro. Aquí, la función pasada como parámetro se invoca cuando el usuario selecciona una opción del menú desplegable.
- $(selector).find(filtro): Este método devuelve todos los elementos descendientes del elemento seleccionado. Aquí <opción> es el descendiente de <seleccionar>. Además, el método requiere un filtro para devolver el elemento requerido. Aquí la opción seleccionada es el filtro, es decir, se devuelve la opción seleccionada por el usuario.
- $(selector).each(función): Este método ejecuta la función pasada como parámetro para cada elemento coincidente. Aquí la función pasada como parámetro se ejecuta para cada elemento devuelto por el método find().
- $(selector).attr(atributo): Este método establece o devuelve atributos y valores de los elementos seleccionados respectivamente. Aquí el valor de la opción seleccionada se extrae en la variable optionValue.
- $(selector).not(criterios): este método devuelve elementos que no coinciden con los criterios especificados. Aquí el método not devuelve las opciones que no son seleccionadas por los usuarios.
- $(selector).hide(): este método oculta el elemento seleccionado.
- $(selector).show(): Este método muestra el elemento seleccionado.
Explicación: la página muestra un menú desplegable en el que el usuario selecciona una opción. Tan pronto como se produce un cambio en el elemento <select>, se activa el método change() que, a su vez, invoca la función de búsqueda y devuelve la opción seleccionada. El método attr() extrae el valor de la opción en la variable optionValue. La variable optionValue se adjunta con ‘.’ (que lo convierte en una de las clases de división definidas) en el método not(). El método not() oculta todas las clases que no coinciden con la clase mencionada en los criterios. El método show() finalmente muestra la división seleccionada por el usuario. Si el usuario no selecciona ninguna opción, se ocultan todas las divisiones.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Elements Using Dropdown</title>
<!--CSS stylesheet-->
<style>
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
</style>
<!--importing jquery cdn-->
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
// jQuery functions to hide and show the div
$(document).ready(function () {
$("select").change(function () {
$(this).find("option:selected")
.each(function () {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
</script>
</head>
<body>
<div>
<!--dropdown list options-->
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<!--divs that hide and show-->
<div class="red box">Red Selected</div>
<div class="green box">Green Selected</div>
<div class="blue box">Blue Selected</div>
</body>
</html>
Producción:
Segundo enfoque: este enfoque demuestra cómo se pueden mostrar una o más divisiones simultáneamente. Este método hace uso de casillas de verificación para tomar la entrada del usuario. Como las casillas de verificación pueden tomar más de un valor a la vez, es una opción ideal para cumplir nuestro propósito. Los siguientes métodos se utilizan en el código:
- $(documento).ready(función): El evento ready se activa cuando se carga el documento y se ejecuta la función pasada como parámetro.
- $(selector).click(función): este método activa el evento de clic o ejecuta una función cuando ocurre un evento de clic. Aquí, cuando el usuario marca la casilla de verificación, se activa el evento de clic y se ejecuta la función pasada como parámetro.
- $(selector).attr(atributo): Este método devuelve los valores de los elementos seleccionados. Aquí el valor de la opción seleccionada se extrae en la variable inputValue.
- $(selector).toggle(): este método alterna entre el método hide() y el método show() para los elementos seleccionados. Si la casilla está marcada, se muestra la división. Si la casilla no está marcada, la división está oculta.
Explicación: La página web contiene ciertas casillas de verificación. El usuario puede seleccionar una o más casillas de verificación a la vez. Las divisiones correspondientes a las casillas de verificación se muestran si estaban ocultas inicialmente. Si las casillas de verificación no están marcadas, la división correspondiente está oculta.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Elements Using Checkboxes</title>
<!--CSS stylesheet-->
<style>
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
label {
margin-right: 15px;
}
</style>
<!--import jQuery cdn-->
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
// jQuery functions to show and hide divisions
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
</head>
<body>
<div>
<!--checkboxes-->
<label><input type="checkbox"
name="colorCheckbox" value="red">
red
</label>
<label><input type="checkbox"
name="colorCheckbox" value="green">
green
</label>
<label><input type="checkbox"
name="colorCheckbox" value="blue">
blue
</label>
</div>
<!--Divisions to be shown and hidden-->
<div class="red box">Red Selected</div>
<div class="green box">Green Selected</div>
<div class="blue box">Blue Selected</div>
</body>
</html>
Producción
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA