使用 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 操作不起作用。任何帮助为什么?



慕尼黑的夜晚无繁华
浏览 97回答 1
1回答

HUX布斯

我不确定那里出了什么问题,但我建议你改变这个逻辑:$("#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 循环内定义相同的函数通常是一个坏主意。)
打开App,查看更多内容
随时随地看视频慕课网APP