如何使用Javascript或jQuery使此代码更有效?
我想通过为所有链接提供公共类来创建10个体内链接。然后你可以用like如何使用Javascript或jQuery使此代码更有效?,javascript,jquery,Javascript,Jquery,我想通过为所有链接提供公共类来创建10个体内链接。然后你可以用like $(".className").click(function(){ alert($(this).attr("href")); }); 您不必为每个锚定标记提供内联调用,我将使用带有data-*属性的jQuery事件处理程序,如 <ul> <li><a href="#" class="fillYellow" data-target=".yellow">Using our site&
$(".className").click(function(){ alert($(this).attr("href")); });
您不必为每个锚定标记提供内联调用,我将使用带有data-*属性的jQuery事件处理程序,如
<ul>
<li><a href="#" class="fillYellow" data-target=".yellow">Using our site</a></li>
<li><a href="#" class="fillYellow" data-target=".yellow1">NonUsing our site</a></li>
<li><a href="#" class="fillYellow" data-target=".yellow2">Blablba our site</a></li>
</ul>
<h2 class="painted yellow">Using our site</h2>
<h2 class="painted yellow1">NonUsing our site</h2>
<h2 class="painted yellow2">BLAbla our site</h2>
演示:
- 将类
添加到所有触发器元素fillYellow
- 向触发器元素添加一个
属性,该属性的选择器值指向必须高亮显示的元素数据目标
- 添加单独的类,如
,yellow
,。。。等目标元素yellow1
<ul>
<li><a href="#" class="fillYellow" data-target=".yellow">Using our site</a></li>
<li><a href="#" class="fillYellow" data-target=".yellow1">NonUsing our site</a></li>
<li><a href="#" class="fillYellow" data-target=".yellow2">Blablba our site</a></li>
</ul>
<h2 class="painted yellow">Using our site</h2>
<h2 class="painted yellow1">NonUsing our site</h2>
<h2 class="painted yellow2">BLAbla our site</h2>
jQuery(function ($) {
$('.fillYellow').click(function () {
var $target = $($(this).data('target')).css('background', 'yellow');
setTimeout(function () {
$target.css('background', '#e5e5e5');
}, 3000);
})
})