jquery - li 属性が undefined を返す

Question

ブートストラップ ページの横にナビゲーション リストがあり、クリックするたびに各項目のカスタム属性の値を取得したいと考えています。さまざまな方法を多数試しましたが、属性が未定義を返し続ける理由がわかりません。

サンプル HTML を次に示します。

<ul id="list" class="nav nav-list">              
    <li class=""><a href="#" myval="firstValue">Item 1</a></li>
    <li class="active"><a href="#" myval="secondValue">Item 2</a></li>
</ul>

そして、ここにjQueryがあります：

$('#list').on('click', 'li:has(a[href^="#"])', function () {
    var currentVal= $(this).attr('myval');
    alert(currentVal);
});

Answer 1

カスタム属性はLIにありません。子から属性を取得する必要があります。

var currentVal= $(this).children('a').attr('myval');

Answer 2

使用しないでくださいmyval、しかしdata-myval：

<a href="#" data-myval="firstValue">

$("#list").on('click', 'li:has(a[href^="#"])', function () {
    alert($(this).children('a[href^="#"]').data('myval'));
});

liまた、クリックのターゲットは何も選択し:hasないことに注意してください。aも削除することで、にバインドすることができ:hasます。