Jquery：选择调用函数的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4057702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: Select the element that called the function
提问by Allen Gingrich
I'm calling a function in the element itself via an onclickattribute because I need php to dynamically give a value in one of the function's parameters. When I try to reference the calling element in the function via $(this), it ends up referencing the entire window and not the element. How do I fix this?
我通过onclick属性调用元素本身中的函数，因为我需要 php 在函数的参数之一中动态给出一个值。当我尝试通过 引用函数中的调用元素时$(this)，它最终引用了整个窗口而不是元素。我该如何解决？
采纳答案by lonesomeday
I doubt you genuinely do need to use an inline onclickattribute. You can store data in an element in a variety of different ways. It's hard to say exactly how you would do it without knowing what the parameter you need to pass is, but I'll give some examples.
我怀疑您是否真的需要使用内联onclick属性。您可以通过多种不同的方式在元素中存储数据。在不知道需要传递的参数是什么的情况下，很难确切地说出你将如何做到这一点，但我会举一些例子。
The most flexible would probably be in a data-attribute:
最灵活的可能是data-属性：
<a href="#" id="subject" data-type="fiction">Text</a>
You could then access the information in the following way:
然后，您可以通过以下方式访问信息：
$(document).ready(function(){
$('#subject').click(function(){
$type = $(this).data('type'); // this works as of jQuery 1.4.3, otherwise $(this).attr('data-type');
// do your handling here, using $type
});
});
You could also do this using classes, script tags that create global variables, all kinds of methods. These will almost certainly be better than putting jQuery handlers in onclickattributes.
您也可以使用类、创建全局变量的脚本标签以及各种方法来实现这一点。这些几乎肯定比将 jQuery 处理程序放在onclick属性中要好。
回答by Canavar
Try to send your element as a parameter to your function like that :
尝试将您的元素作为参数发送给您的函数，如下所示：
<input type="text" onclick="myfunction(this);"></input>
your function should be :
你的功能应该是：
<script>
function myfunction(currentElement){
// ...
}
</script>
回答by Ben Lee
The solution is to store the dynamic value in a custom attribute, not an onclick handler. The HTML spec defines any attribute starting with "data-" as custom data used exactly for things like this, and it's in the spec so it will validate. So you can do something like this (using PHP for the example, adjust accordingly):
解决方案是将动态值存储在自定义属性中，而不是 onclick 处理程序中。HTML 规范将任何以“data-”开头的属性定义为完全用于此类事情的自定义数据，并且它在规范中，因此它将被验证。所以你可以做这样的事情（以 PHP 为例，相应地调整）：
<input type="text" id="some-input" data-some-dynamic="<?php echo $something; ?>">
Then retrieve in the javascript like so:
然后像这样在javascript中检索：
$(document).ready(function() {
$('#some-input').click(function() {
// $(this) -- is the input element
// $(this).attr('some-dynamic-attribute') -- contains the dynamic data you need
});
});
I think this method is superior to using attribute handlers like onclick="", simple because it is more solid from a design perspective; separation of concerns and all that.
我认为这种方法优于使用像 onclick="" 这样的属性处理程序，简单是因为从设计角度来看它更可靠；关注点分离等等。
