En este artículo, veremos cómo hacer un evento de doble clic en un elemento de párrafo para alternar el color de fondo en jQuery. Para alternar el color de fondo de un elemento div al hacer doble clic, se utiliza el método toggleClass(). El método toggleClass() se usa para alternar o cambiar la clase que se adjunta con el elemento seleccionado.
Sintaxis:
$(selector).dblclick(function() {
$(selector).toggleClass("element");
})
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Double click on a paragraph to
toggle background color in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var block = $(".main");
block.dblclick(function () {
block.toggleClass("GFG");
});
});
</script>
<style>
body {
text-align: center;
}
.main {
width: 350px;
height: 200px;
border: 2px solid black;
}
.GFG {
background: green;
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1>GeeksforGeeks</h1>
<h3>
How to Double click on a paragraph to
<br>toggle background color in jQuery?
</h3>
</div>
</body>
</html>
Producción:
