使用 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 类的 fadeIn 操作有效。

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

Answer 1

我不确定那里出了什么问题，但我建议你改变这个逻辑：$("#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">&nbsp; <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">&nbsp; <div class="popup-handler" data-rel="2" data-action="close">x</div></div><!-- jQuery -->$(".popup-handler").on("click", function() {&nbsp; /* get popup reference & action */&nbsp; var rel = $(this).data("rel"),&nbsp; &nbsp; action = $(this).data("action");&nbsp; /* find the target popup */&nbsp; var $popup = $(".popup").filter("[data-rel=" + rel + "]");&nbsp; if (action == "open") {&nbsp; &nbsp; $popup.fadeIn("slow");&nbsp; &nbsp; /* ... other code when opening a popup... */&nbsp; }&nbsp; if (action == "close") {&nbsp; &nbsp; $popup.fadeOut("slow");&nbsp; &nbsp; /* ... other code when closing a popup... */&nbsp; }});我不确定那里出了什么问题，但我建议你改变这个逻辑：$("#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">&nbsp; <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">&nbsp; <div class="popup-handler" data-rel="2" data-action="close">x</div></div><!-- jQuery -->$(".popup-handler").on("click", function() {&nbsp; /* get popup reference & action */&nbsp; var rel = $(this).data("rel"),&nbsp; &nbsp; action = $(this).data("action");&nbsp; /* find the target popup */&nbsp; var $popup = $(".popup").filter("[data-rel=" + rel + "]");&nbsp; if (action == "open") {&nbsp; &nbsp; $popup.fadeIn("slow");&nbsp; &nbsp; /* ... other code when opening a popup... */&nbsp; }&nbsp; if (action == "close") {&nbsp; &nbsp; $popup.fadeOut("slow");&nbsp; &nbsp; /* ... other code when closing a popup... */&nbsp; }});此处演示 - 4 个弹出窗口，工作：jsfiddle（在 while 循环内定义相同的函数通常是一个坏主意。）