Para borrar los datos agregados anteriormente sobre el cambio, el menú desplegable se lleva a cabo utilizando jQuery. Los datos adjuntos deben borrarse al cambiar o al alternar el menú desplegable; de lo contrario, los datos adjuntos previamente se adjuntan con los datos del elemento de menú actual. Para evitar este problema, se implementa jQuery o JavaScript con la ayuda de los métodos add(), remove(), addClass() y removeClass().
Los siguientes enfoques explicarán claramente:
Enfoque 1: utilice inicialmente el método removeClass() para eliminar la clase activa del elemento de menú de datos agregado anteriormente. Luego, seguido del método addClass() para agregar la clase activa del elemento de menú de datos adjunto actualmente. Ahora use la función each() para agregar datos con respecto a la clase activa agregada o eliminada al hacer clic.
- Ejemplo: Debajo de la Alerta, elija el ejemplo ilustrado para borrar los datos agregados previamente al cambiar el menú desplegable usando los métodos remove(), add() .
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="<scriptsrc="</script><scriptsrc="</script><scriptsrc="</script></head><body><divclass="container"><h1class="pt-3 text-success font-weight-bold text-center">GeeksforGeeks</h1><divclass="m-3 dropdown"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">Alert Menu</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Success</a><aclass="dropdown-item"href="#">Warning</a><aclass="dropdown-item"href="#">Danger</a></div></div><pid="alert"class="alert alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><iid="demo"></i> Alert ! ...</p></div><script>$("a").click(function() {// removeClass active of previously selected menu item$('a.dropdown-item.active').removeClass("active");// Add class active to current selected menu item$(this).addClass("active");// Getting text from within selected elementsvar msg = $('a.dropdown-item.active').text();// If condition to check selected alert messageif (msg == "Success") {$("#alert").removeClass("alert-warning");$("#alert").removeClass("alert-danger");$("#alert").addClass("alert-success");} else if (msg == "Warning") {$("#alert").removeClass("alert-success");$("#alert").removeClass("alert-danger");$("#alert").addClass("alert-warning");} else {$("#alert").removeClass("alert-success");$("#alert").removeClass("alert-warning");$("#alert").addClass("alert-danger");}var str = "";$(".active").each(function() {// Using html() to append html datastr += $(this).html() + " ";});$("#demo").html(str);}).click();</script></body></html> - Producción:
Enfoque 2: Inicialmente use for loop para eliminar la clase activa del elemento del menú de datos agregado previamente, aquí la condición del bucle se basa en la longitud del elemento enumerado con la ayuda del método remove() . Luego, seguido del método add() para agregar la clase activa del elemento del menú de datos agregado actualmente en la lista. Ahora use la función each() para agregar datos con respecto a la clase activa agregada o eliminada mientras cambia los elementos de la lista.
- Ejemplo: El siguiente ejemplo de selección de cursos activos ilustra cómo borrar los datos agregados previamente al cambiar el menú desplegable usando los métodos addClass(), removeClass().
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="<scriptsrc="</script><scriptsrc="</script><scriptsrc="</script></head><body><divclass="container"><h1class="pt-3 text-success font-weight-bold text-center">GeeksforGeeks</h1><divclass="m-3 dropdown"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">Active Courses Menu</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">JAVA Backend Development</a><aclass="dropdown-item"href="#">DSA Foundation</a><aclass="dropdown-item"href="#">GEEK Class</a><aclass="dropdown-item"href="#">Machine Learning Foundation With Python & AI</a><aclass="dropdown-item"href="#">Competitive Programming</a></div></div><divclass="card"><divclass="card-header bg-primary text-light">Selected Courses</div><divclass="card-body p-3 bg-lighttext-dark borderborder-primary"><h4id="demo"></h4></div><divclass="card-footer bg-primary text-light">Available @ GeeksforGeeks</div></div></div><script>$(".dropdown-item").click(function() {// Select all list itemsvar dropItems = $(".dropdown-item");var str = "";// Remove 'active' tag for all list items// based on iterationfor (let i = 0; i <dropItems.length; i++) {dropItems[i].classList.remove("active");}// Add 'active' tag for currently selected itemthis.classList.add("active");$(".active").each(function() {// Using text() to append text datastr += $(this).text() + " ";});$("#demo").text(str);});</script></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA