具有 JQUERY 功能的动态 ID

Question

我的 JQUERY 代码有问题。这是代码：

$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++;
}

正确计算了 .testimonio-popup div 在站点中出现的总次数，并且 .testimoniooverlay class 的淡入效果有效。

但是#popup-[number] 的淡入效果不起作用。有什么帮助吗？

为了获得进一步的帮助，我附上了进行查询的 PHP 代码：

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(']]>', ']]&gt;', $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;
}

谢谢！弗雷德

Answer 1

@Rory McCrossan 是对的（见评论）。我不确定那里出了什么问题，但我建议您更改此逻辑：

$("#open-1").on(....);
$("#open-2").on(....);
$("#open-3").on(....);
$("#close-1").on(....);
$("#close-2").on(....);
$("#close-3").on(....);
$("#popup-1").fadeIn()
$("#popup-2").fadeIn()

使用类和属性：

$(".popup-handler").on(.. check if open/close -> then action..);
$(".popup").filter(.. check for specific reference..).fadeIn()

如果您想与不同类的元素进行交互，请向它们添加数据属性，以便您可以在需要时找到它们。这是一个简单的例子：

<!-- 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... */
  }
});

此处演示 - 4 个弹出窗口，有效：jsfiddle

（在 while 循环中定义相同的函数通常不是一个好主意。）

具有 JQUERY 功能的动态 ID

Dynamic ID with JQUERY functions

php

jquery

wordpress

wordpress-shortcode