onclick事件jQuery中的当前元素引用
[英]Current element reference inside onclick event jQuery
问题描述
I have a structure like below 
我有一个像下面的结构
<ul>
<li onclick="CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak')">
<a class="btn-App1" href="#">
<img src="../images/ImgVer6/Aaj Tak.png" />
</a>
<a class="btn-App2 " href="#">
<div>
Aaj Tak
</div>
</a>
</li>
...................
</ul>
and created javascript function as below and trying to get the current element but not getting 并创建了如下的javascript函数，并尝试获取当前元素，但未获取
function CheckSiteAvailabilty(website, message) {
//$(this) change the current element ie li css
}
5 个解决方案
解决方案1
2 已采纳 2015-04-14 05:16:20
Invert the flow - set the data in a declarative way as the element attribute: 反转流程-以声明方式将数据设置为element属性：
<ul>
<li data-url="http://aajtak.intoday.in/" data-name="Aaj Tak">
<a class="btn-App1" href="#">
<img src="../images/ImgVer6/Aaj Tak.png" />
</a>
<a class="btn-App2 " href="#">
<div>
Aaj Tak
</div>
</a>
</li>
...................
</ul>
Then with the help of jquery you can handle it in a much nicer way than you currently have: 然后在jquery的帮助下，您可以以比现在更好的方式处理它：
$('li').click(function() {
var $this = $(this);
var url = $this.data('url'),
name = $this.data('name');
});
PS: you would use the class selector instead of li in case if you have multiple lists on the page. PS：如果页面上有多个列表，则可以使用类选择器代替li 。
解决方案2
1 2015-04-14 05:07:16
pass this as a parameter to function this作为参数传递给函数
<li onclick="CheckSiteAvailabilty(this,'http://aajtak.intoday.in/','Aaj Tak')">
javascript JavaScript的
function CheckSiteAvailabilty( obj, website, message) {
console.log(obj)
}
OR using jquery. 或使用jQuery。
you need to use selector as per your HTML
$(document).ready(function(){
$('ul li').on('click',function(){
console.log($(this));
});
});
解决方案3
1 2015-04-14 05:08:01
You should pass this as function parameter 您应该将此作为函数参数传递
<ul>
<li onclick="CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak', this)">
<a class="btn-App1" href="#">
<img src="../images/ImgVer6/Aaj Tak.png" />
</a>
<a class="btn-App2 " href="#">
<div>
Aaj Tak
</div>
</a>
</li>
...................
</ul>
function CheckSiteAvailabilty(website, message, element) {
alert(element);
//$(this) change the current element ie li css
}
解决方案4
0 2015-04-14 05:30:34
Here is another approach, HTML: 这是另一种方法，HTML：
<body>
<ul>
<li>
<a class="btn-App1" href="#">
<img src="../images/ImgVer6/Aaj Tak.png" />
</a>
<a class="btn-App2 " href="#">
<div>
Aaj Tak
</div>
</a>
</li>
...................
</ul>
</body>
Script will look like this: 脚本将如下所示：
<script>
$(document).ready(function(){
$("li").click({url:"http://aajtak.intoday.in/", name: "Aaj Tak"}, CheckSiteAvailabilty);
});
function CheckSiteAvailabilty(event){
alert(event.data.url);
alert(event.data.name);
}
</script>
Here the data is passed through the event. 此处数据通过事件传递。
解决方案5
0 2015-04-14 05:35:47
Please refer the jsfiddle http://jsfiddle.net/j5ougwoq/1/ 请参考jsfiddle http://jsfiddle.net/j5ougwoq/1/
instead of writing click as on <li onclick="CheckSiteAvailabilty give li element some class say class="checkIt" and add the script as below, pass this as a function parameter 而不是像在<li onclick="CheckSiteAvailabilty上编写click一样，给li元素一些类，例如class="checkIt"并添加如下脚本， this作为函数参数传递
$(document).ready(function() {
$('.checkIt').click( function() {
CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak', this)
});
function CheckSiteAvailabilty(website, message, div) {
//$(this) change the current element ie li css
alert(website);
alert(message);
$(div).addClass('red'); // or whichever class you add for css
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.