javascript - 使用事件委托(delegate)时有没有办法检查元素的属性？

Question

使用事件委托(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>

假设所有段落最初都是隐藏的，点击第一个按钮，第一段出现，点击第二个按钮，第一段隐藏，第二段显示，点击第三个按钮，第二段出现隐藏段落，同时也隐藏第一段。

到目前为止，我的解决方案是为每个特定按钮制作一个事件处理程序，并隐藏其他两个段落，同时只显示一个。它可以工作，但如果元素数量增加，每个元素所需的事件处理程序也会增加。有更好的方法吗？

Answer 1

如果按钮和段落的索引相同，则可以使用 .index():

$('button').click(function() {
    var idx = $(this).index('ul li button');
    $('div p').eq(idx).show().siblings('p').hide();    
});

Fiddle Demo

或者，如果索引不同，您可以使用 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();    
});

Fiddle Demo