Php 带有JQUERY函数的动态ID_Php_Jquery_Wordpress_Wordpress Shortcode

Php 带有JQUERY函数的动态ID

php jquery wordpress

Php 带有JQUERY函数的动态ID,php,jquery,wordpress,wordpress-shortcode,Php,Jquery,Wordpress,Wordpress Shortcode,我的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'

我的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++;
}

$maxcounter=$（'.testimonio popup[id^=“popup-”]）长度；
var i=0；
同时（i<$maxcounter）{
$（“#打开-”+i）.on（'click'，function（）{
$（'#popup-'+i）.fadeIn（'slow'）；
$（'.testimonio overlay'）.fadeIn（'slow'）；
$（'.testimonio overlay'）.height（$（window.height（））；
返回false；
});
$（'#close-'+i）.on（'click'，function（）{
$（'popup-'+i）.fadeOut（'slow'）；
$（'testimonio overlay'）.fadeOut（'slow'）；
返回false；
});
i++；
}

它正确地计算了.testimonio弹出div在站点中出现的总次数，以及.testimoniooverlay类的fadeIn操作的工作时间

但是#popup-[number]的fadeIn操作不起作用。有什么帮助吗？为什么

为了获得进一步的帮助，我附上进行查询的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;
}

函数获取带有格式的内容（$more\u link\u text='（more…），$striptaster=0，$more\u file=''）{
$content=获取内容（$more\u link\u text、$striptaster、$more\u file）；
$content=apply_过滤器（'the_content'，$content）；
$content=str_replace（']]>'，']]'，$content）；
返回$content；
}
添加_短代码（'testimonios'，'display_testimonios'）；
功能显示\u testimonios（$atts）{
$atributos=shortcode_atts（['grupo'=>'PORDEFECTO'，]，$atts）；
$buffer=''；
$contadorid=0；
$q=新的WP\U查询（数组(
“post_类型”=>“测试”，
“tax_query”=>数组(
排列(
“分类法”=>“grupos_testimonios”，
'字段'=>'段塞'，
“条款”=>$atributos['grupo']
//“术语”=>“grupo-1”
)
)
) );  
而（$q->have_posts（））{
$q->the_post（）；
$buffer.=''；
$buffer.=''。获取\u post\u缩略图（$\u post->ID）。''；
$buffer.=''。获取标题（）；
$buffer.=''。获取摘录（）。'Leer más'；
$buffer.='x'；
$buffer.=''。获取标题（）；
$buffer.=''。使用格式（）获取内容''；
$contadorid=$contadorid+1；
}
wp_reset_postdata（）；
返回$buffer；
}

谢谢大家!！弗雷德

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


x
$（“.popup handler”）。在（“单击”，函数（）{
/*获取弹出引用和操作*/
var rel=$（this）.data（“rel”），
action=$（this）.data（“action”）；
/*找到目标弹出窗口*/
var$popup=$（“.popup”）.filter（“[data rel=“+rel+”]）；
如果（操作==“打开”）{
$popup.fadeIn（“慢”）；
/*…打开弹出窗口时的其他代码*/
}
如果（操作==“关闭”）{
$popup.fadeOut（“慢”）；
/*…关闭弹出窗口时的其他代码*/
}
});

此处演示-4个弹出窗口，工作：

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

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


x
$（“.popup handler”）。在（“单击”，函数（）{
/*获取弹出引用和操作*/
var rel=$（this）.data（“rel”），
action=$（this）.data（“action”）；
/*找到目标弹出窗口*/
var$popup=$（“.popup”）.filter（“[data rel=“+rel+”]）；
如果（操作==“打开”）{
$popup.fadeIn（“慢”）；
/*…打开弹出窗口时的其他代码*/
}
如果（操作==“关闭”）{
$popup.fadeOut（“慢”）；
/*…关闭弹出窗口时的其他代码*/
}
});

此处演示-4个弹出窗口，工作：

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

我强烈建议您为此使用公共类，而不是将增量id Strings拼凑在一起。我强烈建议您使用公共类，而不是将增量id Strings拼凑在一起！！成功了。非常感谢你提供了一种不同的方法，并教我：）美丽！！成功了。非常感谢您提供了一种不同的方法，并教我：）