如何将此元素传递给 JavaScript onclick 函数并向该单击的元素添加一个类
how to pass this element to javascript onclick function and add a class to that clicked element
>我有一个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>
当用户单击任何选项卡时
- 所有剩余的选项卡都应处于非活动状态,
- 并且当前元素/选项卡应处于活动状态,
我上面的代码不起作用。
- 如何使上面的代码工作?
- 我只想为此使用 javascript onclick。当用户单击选项卡时,有什么方法可以发送
this
(当前)对象?
使用此 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>
脚本:
function Data(string, el)
{
$('.filter').removeClass('active');
$(el).parent().addClass('active');
}
尝试喜欢
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
对于类选择器,您需要在类名之前使用 .
。并且您需要为父级添加类。 Bec 您正在单击锚标签而不是filter
.
<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>
你的代码中有两个问题。首先,您需要参考以在单击时捕获元素。尝试向函数添加另一个参数以引用此参数。活动类最初也用于 li 元素,而您尝试将其添加到函数中的"a"元素。试试这个..
<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>
您可以使用
addEventListener
将this
传递给JavaScript函数。
.HTML
<button id="button">Year</button>
JavaScript
(function () {
var btn = document.getElementById('button');
btn.addEventListener('click', function () {
Date('#year');
}, false);
})();
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent().addClass('active') ;
}
<!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>
相关文章:
- 如何将html元素添加到tampermonkey中
- 如何将html元素添加为生成的内容
- 如何向Selectize元素添加渲染和创建方法
- 向html选择元素添加选项
- 在d3中向DOM元素添加了图像,但现在它赢得了't过渡
- 如何将新的键/值对元素添加到现有数组
- 使用docment.createElement向元素添加选项
- ng重复向一个元素添加条件类
- 为li元素添加标题
- 向ckeditor中的多个元素添加内联样式
- Javascript 向影子根中的自定义元素添加函数
- 将伪元素添加到<文本区域>
- 如果类只包含一个特定数字,则向元素添加类
- DOM:将空元素添加到 DOM 和页面重排
- 是否有 jQuery 事件用于何时将元素添加到文档中
- 通过 ajax 使用自定义滚动条向元素添加内容
- 是否可以用D3将svg元素添加到开放层映射中
- 如何将元素添加到动态数组并排除现有元素
- 在AngularJS中将元素添加到作用域时,如何在所有设备上播放声音
- 将图像元素添加到<a>标签