jquery click函数声明在运行时评估变量
Posted
技术标签:
【中文标题】jquery click函数声明在运行时评估变量【英文标题】：jquery click function declaration evaluates the variable at runtime 【发布时间】：2022-01-12 10:43:36 【问题描述】：我正在尝试使用 css 和 div in this answer 创建通知。
但我需要多个通知，所以我序列化了 div 的 id。
问题是，当我声明 click 函数时，变量 nname 不会被评估 - 只有当我点击关闭按钮时才会评估它。所以只有最后一个通知被忽略了。
如何使用变量“nname”的值声明函数？
我找到了a similar post，但它是关于 zsh 的。
nc = 0;
function show_notification(data)
nname = "notification_" + nc
$('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>');
$('#' + nname).fadeIn("slow").append('some new information');
$('#' + nname + ' .dismiss').click(function()$("#" + nname).fadeOut("slow"););
nc++;
【问题讨论】：
我无法解决您描述的主要问题。您还在寻找其他解决方案吗？ 您需要的 SO 问题是：how do closures work 但是，在这种情况下，您不需要id 并且增量 ID 是您将受益的拐杖。在这种情况下，更改为 .appendTo 然后您将获得对新元素的引用，而无需重新选择它。事件委托将使用 this 和 DOM 导航来处理解雇。鉴于有限的代码/没有 html，很难准确（编辑：它是`.notification）
所需的html在附加代码中给出。
是的，刚刚意识到复制到小提琴时 - 没有看到它，因为它被滚动到一边
【参考方案1】：
问题是变量 nname 不是每次调用 show_notification 时唯一的 - 通过不添加 let/var/const 它成为一个全局变量，所以当你点击第一个[x] 变量已更改为指向最近的变量。
虽然有一些方法可以解决这个问题，但您可以通过使用 .appendTo 为您提供一个包含新内容的变量，然后对该变量使用 jquery 方法，从而消除对增量 ID 的需求。
var newDiv = $("your html").appendTo("body");
newDiv.fadeIn();
在点击处理程序中，使用this 和 DOM 导航关闭选定的弹出窗口。
....click(function()
$(this).closest(".notification").fadeOut();
);
function show_notification(data)
var newDiv = $('<div class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>')
.appendTo("body");
newDiv.fadeIn("slow").append('some new information:' + data);
newDiv.find(".dismiss").click(function()
$(this).closest(".notification").fadeOut("slow");
);
// Add some notifications
show_notification("1");
setTimeout(() => show_notification("two"), 500);.dismiss color: red; margin-right: 0.5em; border: 1px solid #FCC; cursor: pointer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>【讨论】：
谢谢，对超时和样式的解释很好，我不知道“appendto”。那将掌握在手中。 （你也没有错过“数据”:)【参考方案2】：这是您的问题的解决方案。 我已经在你的锚标记中给出了你的通知 id 的计数，并获取了相同的值以删除特定的通知。
nc = 0;
function show_notification()
nname = "notification_" + nc
$('body').append('<div id="' + nname + '" class="notification" style="display: none;"> <span><a title="dismiss notification" class="dismiss" data-id = "'+nc+'" >Close</a></span> </div>');
$('#' + nname).fadeIn("slow").append('some new information');
nc++;
$(document).on("click",".dismiss",function()
var findid = $(this).attr('data-id');
$("#notification_"+findid).fadeOut("slow");
);
show_notification();
show_notification();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
</body>【讨论】：
谢谢，我完全忘记了$(this)。 $(this).parent().fadeOut('slow') 成功了。 很高兴知道您找到了解决方案 :) 继续努力以上是关于jquery click函数声明在运行时评估变量的主要内容，如果未能解决你的问题，请参考以下文章