jQuery 如何将此元素传递给 javascript onclick 函数并将类添加到该单击的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19998711/
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
how to pass this element to javascript onclick function and add a class to that clicked element
提问by Shiva Krishna Bavandla
I had an html navigation code as below
我有一个 html 导航代码如下
function Data(string) {
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(this).addClass('active');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter"><a href="#month" onclick="Data('month')">This Month</a></li>
<li class="filter"><a href="#year" onclick="Data('year')">Year</a></li>
<li class="filter"><a href="#last60" onclick="Data('last60')">60 Days</a></li>
<li class="filter"><a href="#last90" onclick="Data('last90')">90 Days</a></li>
</ul>
</div>so from the above code what i am trying to do is, when the user clicks on any of the tab all the remaining tabs should be unactive, and the current current element/tab should be active, but the above code is not working, so can anyone please let me know, how to make the above code work, also is there anyway that we can send the this(current) object when the user clicks on the tab, because i want to use only javascript onclick for this ?
所以从上面的代码我想要做的是，当用户单击任何选项卡时，所有剩余的选项卡都应该处于非活动状态，并且当前的当前元素/选项卡应该处于活动状态，但是上面的代码不起作用，所以任何人都可以让我知道，如何使上述代码工作，无论如何我们可以this在用户单击选项卡时发送（当前）对象，因为我只想为此使用 javascript onclick 吗？
回答by Sujata Chanda
Use this html to get the clicked element:
使用这个 html 来获取被点击的元素：
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter"><a href="#month" onclick="Data('month', this)">This Month</a></li>
<li class="filter"><a href="#year" onclick="Data('year', this)">Year</a></li>
<li class="filter"><a href="#last60" onclick="Data('last60', this)">60 Days</a></li>
<li class="filter"><a href="#last90" onclick="Data('last90', this)">90 Days</a></li>
</ul>
</div>
Script:
脚本：
function Data(string, el)
{
$('.filter').removeClass('active');
$(el).parent().addClass('active');
}
回答by Naman
You can use addEventListenerto pass thisto a JavaScript function.
您可以使用addEventListener传递this给 JavaScript 函数。
HTML
HTML
<button id="button">Year</button>
JavaScript
JavaScript
(function () {
var btn = document.getElementById('button');
btn.addEventListener('click', function () {
Date('#year');
}, false);
})();
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent().addClass('active') ;
}
回答by Vicky Gonsalves
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter"><a href="#month" onclick="Data(this)">This Month</a></li>
<li class="filter"><a href="#year" onclick="Data(this)">Year</a></li>
<li class="filter"><a href="#last60" onclick="Data(this)">60 Days</a></li>
<li class="filter"><a href="#last90" onclick="Data(this)">90 Days</a></li>
</ul>
</div>
<script>
function Data(element)
{
element.removeClass('active');
element.addClass('active') ;
}
</script>
回答by user1776573
You have two issues in your code.. First you need reference to capture the element on click. Try adding another parameter to your function to reference this. Also active class is for li element initially while you are tryin to add it to "a" element in the function. try this..
您的代码中有两个问题。首先，您需要参考以在单击时捕获元素。尝试向您的函数添加另一个参数以引用它。当您尝试将其添加到函数中的“a”元素时，活动类最初也用于 li 元素。尝试这个..
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter"><a href="#month" onclick="Data('month',this)">This Month</a></li>
<li class="filter"><a href="#year" onclick="Data('year',this)">Year</a></li>
<li class="filter"><a href="#last60" onclick="Data('last60',this)">60 Days</a></li>
<li class="filter"><a href="#last90" onclick="Data('last90',this)">90 Days</a></li>
</ul>
</div>
<script>
function Data(string,element)
{
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(element).parent().addClass('active') ;
}
</script>
回答by Arun
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.src);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>
回答by Gautam3164
Try like
试试像
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
For the class selector you need to use .before the classname.And you need to add the class for the parent. Bec you are clicking on anchor tag not the filter.
对于类选择器，您需要.在类名之前使用。并且您需要为父类添加类。因为你点击的是锚标签而不是filter.
