JQUERY TOGGLE CLASE Y CONTENIDO EN CLIC DE ENLACE -- javascript campo con performance campo con jquery camp codereview Relacionados El problema

jQuery toggle class and content on click of link


1
vote

problema

Español

El siguiente código está funcionando exactamente como se espera que funcione, la cosa es que estoy seguro de que se puede escribir de una manera más eficiente y menos verbosa, ¿alguna crítica?

javascript:

  $(document).ready(function() {     $('.hidden-content').hide();     $(".hidden-content-reveal").click(function() {         var $i = $(this).children();         if ($i.is(".angle-down")){             $i.removeClass("angle-down");             $i.addClass("angle-up");         } else {             $i.removeClass("angle-up");             $i.addClass("angle-down");         }         return false;     }); });   

html:

  <div>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>     <a href="#" class="hidden-content-reveal">         <i class="angle-down" style="font-size:24px"></i>     </a>     <div class="hidden-content">         <p>Nulla facilisi. Cras non egestas lectus. Duis malesuada eleifend neque, eget tincidunt elit convallis sed.Nulla facilisi. Cras non egestas lectus.</p>     </div> </div>   
Original en ingles

The following code is working exactly as it is expected to work, the thing is that I'm sure that it can be written in a more efficient and less verbose way, any reviews?

JavaScript:

$(document).ready(function() {     $('.hidden-content').hide();     $(".hidden-content-reveal").click(function() {         var $i = $(this).children();         if ($i.is(".angle-down")){             $i.removeClass("angle-down");             $i.addClass("angle-up");         } else {             $i.removeClass("angle-up");             $i.addClass("angle-down");         }         return false;     }); }); 

HTML:

<div>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>     <a href="#" class="hidden-content-reveal">         <i class="angle-down" style="font-size:24px"></i>     </a>     <div class="hidden-content">         <p>Nulla facilisi. Cras non egestas lectus. Duis malesuada eleifend neque, eget tincidunt elit convallis sed.Nulla facilisi. Cras non egestas lectus.</p>     </div> </div> 
        
     
     

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

char *sb_free_copy(StringBuilder sb) { char *ret = sb->mem; sb->mem = NULL; sb_free(sb); return ret; } 2 se puede mover a CSS. Esto será mejor UX y el usuario no verá ningún FLICKR en la pantalla si la página tarda mucho tiempo en cargar y, por lo tanto, ocultar el elemento por JavaScript.

  char *sb_free_copy(StringBuilder sb) {     char *ret = sb->mem;     sb->mem = NULL;     sb_free(sb);     return ret; } 3  

Para verificar si un elemento tiene una clase, char *sb_free_copy(StringBuilder sb) { char *ret = sb->mem; sb->mem = NULL; sb_free(sb); return ret; } 4 puede ser utilizado en lugar de char *sb_free_copy(StringBuilder sb) { char *ret = sb->mem; sb->mem = NULL; sb_free(sb); return ret; } 5 .

Los métodos pueden ser encadenados char *sb_free_copy(StringBuilder sb) { char *ret = sb->mem; sb->mem = NULL; sb_free(sb); return ret; } 6 Pero hay una mejor manera de hacer esto.

Para alternar la clase en un elemento, char *sb_free_copy(StringBuilder sb) { char *ret = sb->mem; sb->mem = NULL; sb_free(sb); return ret; } 7 puede ser usado. Esto también acepta la función de devolución de llamada.

  char *sb_free_copy(StringBuilder sb) {     char *ret = sb->mem;     sb->mem = NULL;     sb_free(sb);     return ret; } 8  

char *sb_free_copy(StringBuilder sb) { char *ret = sb->mem; sb->mem = NULL; sb_free(sb); return ret; } 9 También acepta la lista de clases separadas por el espacio. Si el elemento ya ha aplicado una de las clases, 99887766555443370 lo eliminará y agregará otras clases. Ahora, el código se convertirá,

  realloc()1  

Demo:

Tenga en cuenta que en Demo, he agregado fuente: increíble para demostrar la funcionalidad.

  realloc()2  
  99887766555443373  
  realloc()4  
 

$('.hidden-content').hide(); can be moved to CSS. This will be better UX and user will not see any flickr on the screen if page take long time to load and thus hide the element by JavaScript.

.hidden-content {     display: none; } 

To check if an element have a class, hasClass() can be used instead of is().

The methods can be chained $i.removeClass("angle-down").addClass("angle-up"); but there is better way to do this.

To toggle the class on an element, toggleClass() can be used. This also accepts callback function.

$('selector').toggleClass(function() {     return $(this).children().hasClass('angle-down') ? 'angle-up' : 'angle-down'; }); 

toggleClass also accepts list of classes separated by space. If the element have already applied one of the class from it, toggleClass will remove it and add other classes. Now, the code will become,

$('selector').toggleClass('fa-angle-down fa-angle-up'); 

Demo:

Note that in Demo, I've added Font-Awesome to demonstrate the functionality.

$(document).ready(function() {   $(".hidden-content-reveal").click(function() {     $(this).children().toggleClass('fa-angle-down fa-angle-up');      $(this).next('.hidden-content').slideToggle();     return false;   }); });
.hidden-content {   display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>   <a href="#" class="hidden-content-reveal">     <i class="fa fa-angle-down" style="font-size:24px"></i>   </a>   <div class="hidden-content">     <p>Nulla facilisi. Cras non egestas lectus. Duis malesuada eleifend neque, eget tincidunt elit convallis sed.Nulla facilisi. Cras non egestas lectus.</p>   </div> </div>
 
 

Relacionados problema

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

1  Actualización de una página web de DRUPAL con contenido basado en texto ingresado  ( Updating a drupal web page with content based on inputted text ) 
La intención es actualizar una página web de drupal existente con contenido basado en texto ingresado en un cuadro de texto. La página existente muestra dat...

8  Escribiendo un widget de jquery: plantilla  ( Writing a jquery widget templating ) 
Estoy haciendo mi primer mayor desarrollo de jQuery. Es un widget para eventos recurrentes, y es como una bestia bastante compleja. El código completo está di...

1  Manipulador de eventos repetitivos para un control de interfaz de usuario de la UI  ( Repetitive event handler for a toggling ui control ) 
Siento que este tipo de código podría haber sido escrito más elegante, especialmente con las enormes afirmaciones de IF / ODS. ¿Alguien puede ayudarme a rompe...

5  Función de movimiento para un juego  ( Move function for a game ) 
Tengo una función PackageSubpackageSubpackageName6 en este juego que estoy haciendo. Funciona bien, pero me gustaría reducir un poco su tamaño. PackageSu...

3  Página web basada en una muestra de un libro  ( Web page based on a sample from a book ) 
He creado una página web basada en una muestra de un libro. Funciona bien, pero parece haber sido demasiado complicado. dt4 ¿Es posible mejorar la clari...

3  Función de estilo sortable jquery  ( Jquery sortable style function ) 
Esta es una función de clasificación básica escrita en jQuery que mueve los elementos en la DOM alrededor para crear espacios vacíos para un gotpable (). Como...

3  Construyendo una tabla HTML utilizando JavaScript  ( Building an html table using javascript ) 
¿Una forma más legible para hacer esto? renderHtmlTable(function(tableItems) { var tableArray,_i,item,_len; tableArray = ['<table id = sampleTable ><...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

2  Animaciones de la línea de tiempo  ( Timeline animations ) 
Hice recientemente esta línea de tiempo del campus para mi universidad. Al ver la línea de tiempo en un dispositivo móvil (no una tableta), la barra de nave...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos