Question

使用事件委派，有没有办法检查已触发的元素，如果它具有特定属性或特定类或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

Answer 2

我认为如果您可以确保按钮的位置和要显示的p相同，那么您可以使用基于索引的解决方案，如

jQuery(function ($) {
    var $ts = $('div > p');
    $('ul button').click(function (e) {
        $ts.hide().eq($(this).parent().index()).show()
    })
})

演示：Fiddle

Answer 3

我宁愿使用<a>代替按钮，然后使用href属性进行识别，并使用id代替段落

<ul class="link-list">
    <li><a href="#first">Make the first paragraph appear</a></li>
    <li><a href="#second">Make the second paragraph appear</a></li>
    <li><a href="#third">Make the third paragraph appear</a></li>
</ul>

<div>
    <p id="first">First paragraph</p>
    <p id="second">Second paragraph</p>
    <p id="third">Third paragraph</p>
</div>

$('.link-list').on('click','li > a',function(){
    //id would be something like #first
    var id = $(this).attr('href');
    //we use it as a selector (you can also use $('div.classname').find(id);
    var $paragraph = $(id);
    // we show our desired paragraph and hide its siblings
    $paragraph.show().siblings().hide();
    // make sure the browser does not follow the link/anchor
    return false;
});

Fiddler

有没有办法在使用事件委托时检查元素的属性？

3 个答案: