jquery click函数声明在运行时评估变量答案

【问题标题】：jquery click function declaration evaluates the variable at runtimejquery click函数声明在运行时评估变量
【发布时间】：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在附加代码中给出。
是的，刚刚意识到复制到小提琴时 - 没有看到它，因为它被滚动到一边

标签： jquery function variables declaration

【解决方案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 }

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

谢谢，对超时和样式的解释很好，我不知道“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') 成功了。
很高兴知道您找到了解决方案 :) 继续努力