php - 带有 JQUERY 函数的动态 ID
问题描述
我的 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 类的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(']]>', ']]>', $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;
}
谢谢!弗雷德
解决方案
@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 循环中定义相同的函数通常是个坏主意。)
推荐阅读
- swift - 将其他客户信息添加到云功能以创建条纹客户
- elasticsearch - 具有运行时编码的日期直方图范围的 Kibana 可视化
- php - 按下按钮时如何调用名为views的目录中的页面?PHP 路由器
- javascript - 使用 BottlePy 在 Python 代码中的每次循环迭代时自动重新加载 HTML 图像
- php - PDFlib 错误的字体句柄
- python - Plotly:如何使用 fig.update 更改表格字体大小?
- ssl - 使用 Apache Pulsar 的 HAProxy TLS/SSL
- javascript - Reactjs Expressjs - 为什么我的 React.js 代码不使用来自我的 Express 服务器的更新代码,而是使用旧代码,即使在我刷新网页之后也是如此?
- oracle - 在 Dapper 中调用 Oracle 存储过程
- c++ - 如何使用 std::optional 返回 NULL 值?