Javascript 使用“打开”（“单击”）获取已单击的元素属性

HTML

<ul class="items">
  <li data-val="1">first</li>
  <li data-val="2">second</li>
  <li data-val="3">last</li>
</ul>

我想在单击事件时获取数据val属性。我知道更改函数体中

$（this）

的位置是可能的，但我需要在函数外部执行此操作。我通过在代码中使用

$（this）获得了
未定义的
。数据（“val”）
。
在代码中，
$（this）
-在父上下文中，而不是在所选节点上下文中，使用如下代码：

var li = $(".items").find("li");
li.on("click", {value: li.data("val") } ,selectNode);

//the function
function selectNode(selected) {
  console.log(selected.data.value);
}

$(".items li").each(function() {
  var value = $(this).data("val");
  $(this).on("click", { value: value }, selectNode);
});

试着这样做，从它（应该）工作的事实来看，它只创建了一个eventHandler，而不是3个（李的计数）

如果您想创建一个事件处理程序，以某种方式了解所涉及的元素，可以执行以下操作：

var li = $(".items").find("li");
li.on("click", {value: li.data("val") } ,selectNode);

//the function
function selectNode(selected) {
  console.log(selected.data.value);
}

$(".items li").each(function() {
  var value = $(this).data("val");
  $(this).on("click", { value: value }, selectNode);
});

您的“selectNode”功能必须不同：

function selectNode(event) {
  var value = event.data.value;
  console.log("the value is " + value);
}

这避免了在事件处理程序中使用
this
，尽管还不清楚为什么会出现问题。还请注意，如果有其他内容更改元素的“val”数据属性，此方法会将值（就事件处理程序而言）冻结为事件处理程序建立时的值。
尝试此方法

传递给事件处理程序的参数将是事件对象，而不是有问题的节点。。。。在函数之外获取值是没有意义的。在触发事件之前，没有上下文。@Pointy您的意思是不可能在函数外部获取值？是否要数据val属性值？不是data val属性本身？如果可以通过某种方式创建对
的引用，则可以获得值，但这与设置事件处理程序没有多大关系。我在问题中提到，我知道这种方法，但我不想使用它。然后只需使用“Milind Anantwar”中所示的闭包即可示例。原因不清楚，但OP显然不想使用
$（this）
获取元素。@Pointy，哦，是的。我更改答案。@maximkou li.data（“val”）如果您单击了任何li元素，则始终返回“1”。为什么要进行向下投票？这是在事件处理程序中实现不需要
This
的（无法解释的）要求的唯一答案。您的代码是最接近我的问题的解决方案，但我只需要属性值，因为我想在不同的环境中多次使用此函数situations@SamanGholami“仅属性值”是什么意思？此代码执行此操作-事件处理程序中的
事件.data.value
的值将是
元素上“data val”属性的值。在您的解决方案中，可以通过以下方式访问值：event.data.value，我希望使用数据val值调用函数，例如selectedNode（1）、selectedNode（2）或者等等@SamanGholami这正是它的作用。每个
元素都是单独处理的（这就是为什么它使用
.Each（）
）。将设置每个事件处理程序，以使事件对象的“data”属性具有该节点的“data val”值。
//inside document.ready event
$(".items").find("li").on("click", function selectNode(e) {
console.log($(this).attr('data-val'));
});