I have a problem with my JQUERY code. Here’s the code:
$maxcounter = $( '.testimonio-popup[id^="popup-"]' ).length; var i = 0; while (i < $maxcounter) { $('#open-'+i).on('click', function() { $('#popup-'+i).fadeIn('slow'); $('.testimonio-overlay').fadeIn('slow'); $('.testimonio-overlay').height($(window).height()); return false; }); $('#close-'+i).on('click', function(){ $('#popup-'+i).fadeOut('slow'); $('.testimonio-overlay').fadeOut('slow'); return false; }); i++; }
It takes correctly the total of times the .testimonio-popup div is appearing in the site, and the fadeIn action for .testimoniooverlay class works.
But the fadeIn action for #popup-[number] is not working. Any help why?
For further assistance, I attach the PHP code that makes the query:
function get_the_content_with_formatting ($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') { $content = get_the_content($more_link_text, $stripteaser, $more_file); $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]>', $content); return $content; } add_shortcode( 'testimonios', 'display_testimonios' ); function display_testimonios($atts){ $atributos = shortcode_atts([ 'grupo' => 'PORDEFECTO', ], $atts); $buffer = '<div class="testimonio-overlay"></div> '; $contadorid = 0; $q = new WP_Query(array( 'post_type' => 'test', 'tax_query' => array( array( 'taxonomy' => 'grupos_testimonios', 'field' => 'slug', 'terms' => $atributos['grupo'] //'terms' => 'grupo-1' ) ) ) ); while ($q->have_posts()) { $q->the_post(); $buffer .= '<div class="testimonio">'; $buffer .= '<div class="testimonio-img">' . get_the_post_thumbnail($_post->ID).'</div>'; $buffer .= '<div class="testimonio-titulo"><p>' . get_the_title() .'</p></div>'; $buffer .= '<div class="testimonio-intro"><div class="testimonio-parrafo">' . get_the_excerpt() . '</div><button class="testimonio-boton" id="open-'.$contadorid.'">Leer más</button></div></div>'; $buffer .= '<div class="testimonio-popup" id="popup-'.$contadorid.'"><div class="testimonio-popup-contenido"><div class="testimonio-cerrar"><button class="testimonio-boton-cerrar" id="close-'.$contadorid.'">x</button></div>'; $buffer .= '<div class="testimonio-popup-titulo"><p>' . get_the_title() .'</p></div>'; $buffer .= '<div class="testimonio-popup-contenido">' . get_the_content_with_formatting() . '</div></div></div>'; $contadorid = $contadorid + 1; } wp_reset_postdata(); return $buffer; }
Thank you! Frede
Advertisement
Answer
@Rory McCrossan is right (see comment). I’m not sure what goes wrong there, but I would suggest you change this logic:
$("#open-1").on(....); $("#open-2").on(....); $("#open-3").on(....); $("#close-1").on(....); $("#close-2").on(....); $("#close-3").on(....); $("#popup-1").fadeIn() $("#popup-2").fadeIn()
to using classes and attributes:
$(".popup-handler").on(.. check if open/close -> then action..); $(".popup").filter(.. check for specific reference..).fadeIn()
And if you want to interact elements with different classes, add data attributes to them so you can find them when needed. Here is a simple example:
<!-- popup nr 1 --> <div class="popup-handler" data-rel="1" data-action="open"></div> <div class="popup" data-rel="1"> <div class="popup-handler" data-rel="1" data-action="close"></div> </div> <!-- popup nr 2 --> <div class="popup-handler" data-rel="2" data-action="open"></div> <div class="popup" data-rel="2"> <div class="popup-handler" data-rel="2" data-action="close">x</div> </div> <!-- jQuery --> $(".popup-handler").on("click", function() { /* get popup reference & action */ var rel = $(this).data("rel"), action = $(this).data("action"); /* find the target popup */ var $popup = $(".popup").filter("[data-rel=" + rel + "]"); if (action == "open") { $popup.fadeIn("slow"); /* ... other code when opening a popup... */ } if (action == "close") { $popup.fadeOut("slow"); /* ... other code when closing a popup... */ } });
Demo here – 4 popups, working: jsfiddle
(Defining the same functions inside a while loop is generally a bad idea.)