使用 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">

  <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... */

  }

});

我不确定那里出了什么问题，但我建议你改变这个逻辑：

$("#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 循环内定义相同的函数通常是一个坏主意。）