jquery 点击函数声明在运行时计算变量

Question

我正在尝试使用 css 和 div in this answer 创建通知。

但是我需要不止一个通知，所以我序列化了 div 的 ID。

问题是，当我声明点击函数时，变量 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++;
}

Answer 1

这是您问题的解决方案。我已经在您的锚标记中给出了您的通知 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>

Answer 2

问题是每次调用 show_notification 时变量 nname 都不是唯一的 - 通过不添加 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>

jquery 点击函数声明在运行时计算变量

jquery click function declaration evaluates the variable at runtime

variables

jquery

declaration

function