將事件處理程序附加到每個li

我有這段代碼，我想將不同的事件處理程序附加到每個<a>而不使用id或class。我試過，但沒有奏效...提前將事件處理程序附加到每個li

$('#points ul li a').on('click', function(event) { 
 
    // I don't know why this selectors doesn't work 
 
    if ($(event.target).is(':eq(0)')) { 
 
    alert('0') // and do something 
 
    } 
 
    if ($(event.target).is(':eq(1)')) { 
 
    alert('1') // and do something 
 
    } 
 
    if ($(event.target).is(':eq(2)')) { 
 
    alert('2') // and do something 
 
    } 
 
})

#points ul { 
 
    list-style: none; 
 
    font-size: 5em; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: .5em; 
 
} 
 
#points ul li { 
 
    float: left; 
 
} 
 
#points ul li a { 
 
    text-decoration: none; 
 
    color: grey; 
 
    padding: .1em; 
 
    line-height: .1em 
 
} 
 
#points { 
 
    position: relative; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="points"> 
 
    <ul> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script

感謝。

來源

2016-08-07 oxk4r

所有的答案是正確的。但是，當我將代碼插入到網頁的主html中時，它並沒有工作，並且在掙扎了一段時間之後，我意識到了爲什麼：在主html內部，之前有更多的標籤，所以這個代碼例如：（例如：（'a：eq（1）'）會匹配頁面中的第一個，而不是#points div中的第一個，這是真正的目標。我想知道是否有可能將#point的第一個標記在某種程度上，與在整個頁面中計數標記的數量不同，謝謝。 – oxk4r

'#points> ul> li> a：eq（0）'將會執行此操作。在'＃points'裏面'ul'裏面。我的回答已經有了。檢查snipeet的例子。 – Iceman

工作！有可能做到這樣的事情嗎？ num = 1; $（'#points> ul> li> a：eq（「num」）'）。toggleClass（'color'）; – oxk4r

建議有很多備用解決方案，但是您的代碼中的具體的 錯誤與您的使用的:eq(0)有關。根據jQuery documentation更改爲#points>ul>li>a:eq(0)。

REPLACE
```
if ($(event.target).is(':eq(1)')) { 
```
WITH
```
if ($(event.target).is('#points>ul>li>a:eq(0)')) { 
```
注：我已經使用#points>ul>li>a以便其他<a> tags上面和下面不被選擇。（您的評論的關於解除同）

我只想補充一點，如果有人問我做同樣的我會帶一個方法，如：

var objArr = $('#points>ul>li>a'); 
objArr.on('click', function(event) { 
    switch($(objArr).index(this)){ 
    case 0: 
     alert('0'); 
     break; 
    case 1: 
     alert('1'); 
     break; 
    case 2: 
     alert('2'); 
     break; 
    } 
});

也就是說你的方法也可以，工作示例帶上面提到的錯誤調整爲爲：

$('#points>ul>li>a').on('click', function(event) { 
 
    // I don't know why this selectors doesn't work 
 
    if ($(event.target).is('#points>ul>li>a:eq(0)')) { 
 
    alert('0') // and do something 
 
    } 
 
    if ($(event.target).is('#points>ul>li>a:eq(1)')) { 
 
    alert('1') // and do something 
 
    } 
 
    if ($(event.target).is('#points>ul>li>a:eq(2)')) { 
 
    alert('2') // and do something 
 
    } 
 
})

#points>ul { 
 
    list-style: none; 
 
    font-size: 5em; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: .5em; 
 
} 
 
#points>ul>li { 
 
    float: left; 
 
} 
 
#points>ul>li>a { 
 
    text-decoration: none; 
 
    color: grey; 
 
    margin: .1em; 
 
} 
 
#points>ul>li>a { 
 
    background-color: yellow; 
 
} 
 
div { 
 
    margin-bottom: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#">random link</a> 
 
    <a href="#">random link</a> 
 
    <a href="#">random link</a> 
 
</div> 
 
<br /> 
 
<div id="points"> 
 
    <ul> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div> 
 
    <a href="#">random link</a> 
 
    <a href="#">random link</a> 
 
</div>

來源

2016-08-07 09:17:22 Iceman

包括a之前選擇:eq()

$('#points ul li a').on('click', function(event) { 
 
    var el = $(event.target); 
 
    if (el.is('a:eq(0)')) { 
 
    alert('0') // and do something 
 
    } 
 
    if (el.is('a:eq(1)')) { 
 
    alert('1') // and do something 
 
    } 
 
    if (el.is('a:eq(2)')) { 
 
    alert('2') // and do something 
 
    } 
 
})

#points ul { 
 
    list-style: none; 
 
    font-size: 5em; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: .5em; 
 
} 
 
#points ul li { 
 
    float: left; 
 
} 
 
#points ul li a { 
 
    text-decoration: none; 
 
    color: grey; 
 
    padding: .1em; 
 
    line-height: .1em 
 
} 
 
#points { 
 
    position: relative; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="points"> 
 
    <ul> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script

來源

2016-08-07 09:08:55 guest271314

@OscarHermida嘗試'el.is（「＃點li：eq（0）a」）' – guest271314

試試這個

var items = $('#points li a'); 
 

 
$('#points ul li a').on('click', function(event) { 
 

 
    var currentItem = event.currentTarget 
 
    
 
    if (items.index(currentItem) === 0) { 
 
    alert('0') ; 
 
    } 
 
    if (items.index(currentItem) === 1) { 
 
    alert('1') ; 
 
    } 
 
    if (items.index(currentItem) === 2) { 
 
    alert('2'); 
 
    } 
 
})

#points ul { 
 
    list-style: none; 
 
    font-size: 5em; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: .5em; 
 
} 
 
#points ul li { 
 
    float: left; 
 
} 
 
#points ul li a { 
 
    text-decoration: none; 
 
    color: grey; 
 
    padding: .1em; 
 
    line-height: .1em 
 
} 
 
#points { 
 
    position: relative; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="points"> 
 
    <ul> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    <li><a href="#">.</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-08-07 09:11:00

將事件處理程序附加到每個li

回答

相關問題