使用事件委托(delegate),有没有办法检查被触发的元素是否具有特定属性或特定类或 ID?
<ul>
<li><button>Make the first paragraph appear</button></li>
<li><button>Make the second paragraph appear</button></li>
<li><button>Make the third paragraph appear</button></li>
</ul>
<div>
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
<p class="third">Third paragraph</p>
</div>
假设所有段落最初都是隐藏的,点击第一个按钮,第一段出现,点击第二个按钮,第一段隐藏,第二段显示,点击第三个按钮,第二段出现隐藏段落,同时也隐藏第一段。
到目前为止,我的解决方案是为每个特定按钮制作一个事件处理程序,并隐藏其他两个段落,同时只显示一个。它可以工作,但如果元素数量增加,每个元素所需的事件处理程序也会增加。有更好的方法吗?
最佳答案
如果按钮和段落的索引相同,则可以使用 .index()
:
$('button').click(function() {
var idx = $(this).index('ul li button');
$('div p').eq(idx).show().siblings('p').hide();
});
或者,如果索引不同,您可以使用 data-*
属性:
<ul>
<li><button data-parapgraph="first">Make the first paragraph appear</button></li>
<li><button data-parapgraph="second">Make the second paragraph appear</button></li>
<li><button data-parapgraph="third">Make the third paragraph appear</button></li>
</ul>
<div>
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
<p class="third">Third paragraph</p>
</div>
然后应用 .data()
来检索 data-*
属性:
$('button').click(function() {
var parapgraph = $(this).data('parapgraph');
$('p.' + parapgraph).show().siblings('p').hide();
});
关于javascript - 使用事件委托(delegate)时有没有办法检查元素的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23750181/