javascript - 具有相同类名的各种div和onclick函数调用打开相应的消息div

Question

我的 javascript 函数目前正在运行，但有问题。我想将它更改为 Jquery 函数，但我不知道该怎么做。

我有一个页面，其中包含许多具有相同类(“消息”)的 div。这些消息窗口在使用 onclick 函数 delete_on('. $id .') 单击“删除”时打开。消息窗口内部是一个关闭窗口的 onclick 函数。

打开和关闭的消息窗口:

<div class="message">
    Sure you want to delete?
    YES <a onclick="delete_off('. $id .')">NO</a>
</div>

打开消息窗口的链接:

<a onclick="delete_on('. $id .')">delete</a>

Javascript 函数:

function delete_on($id) {
  document.getElementsByClassName("message")[$id].style.display = "block";
  document.body.style.overflowY = "hidden";
}

function delete_off($id) {
  document.getElementsByClassName("message")[$id].style.display = "none";
  document.body.style.overflowY = "auto";
}

我给每个 onclick 函数一个 $id，它为每个 div 和“删除”链接计数。 javascript 函数知道它必须打开由 $id 引起的哪个 div。

函数中的 [$id] 部分是问题所在。我不能让它在 Jquery 中工作？! 有人能帮我吗？有没有另一种方法可以将 javascript 函数组合到正确的 div 中？

Answer 1

尝试使用 $.on 设置事件监听器，如下所示:

$('.message').on('click', function () {
  // $(this) is the thing clicked...
});

一旦获得 $(this)，您就可以相对地在该元素周围导航。获取其父级，例如:

$('.message').on('click', function () {
  var parent = $(this).parent();
});

随心所欲地操纵它。

https://jsfiddle.net/ozdzug33/1/

祝你好运!