.dataが機能しないのはなぜですか？

Question

ここで初心者、私は2時間以上、この上してきました！これは私があなたに永遠にお世話になり機能しない理由:)

  @foreach (var c in Model.Cleaner.TimeConfirmations) 
      { 
<label class="glyphicon glyphicon-remove-circle cancelTime thex" data-timeid="12"></label> 
       } 

      } 

を誰も私を伝えることができた場合:(

その後、jqueryの

$(".thex").on('click', function() { 
    var id = $(this).data("timeId") 
    alert(id); 

}); 

はなぜ未定義のidがあります？！？！ ？！？！？！

Answer 1

大文字と小文字を区別エラー。

Working Fiddle

$(".thex").on('click', function() { 
    var id = $(this).data("timeid") 
    alert(id); 
}); 

Answer 2

data機能を使用すると、その値を取得するために、キャメルケースtimeIdを使用したい場合は、要素のデータは、次のようにdata("timeid")試合data-timeid属性とdata("timeId")試合data-time-id

を属性値を取得しますあなたは、次のように記述する必要が

<label class="glyphicon glyphicon-remove-circle cancelTime thex" data-time-id="12"></label> 

HTMLでハイフン文字はキャメルケースとして識別します。

代わりに、あなたはそれが大文字小文字を区別しない検索を行い、属性の値を取得するにはattr機能を使用することができます。詳細については、以下のコードをチェックしてくださいthis

をチェックし、私はそれがあなたの助けになることを願っています。

$(document).ready(function() { 
 
    $(".thex").on('click', function() { 
 
    var id = $(this).data("timeid") 
 
    console.clear(); 
 
    console.log('data function: ' + id); 
 
    console.log('attr function: ' + $(this).attr('data-timeId')); 
 
    }); 
 

 
    $(".thex-alt").on('click', function() { 
 
    var id = $(this).data("timeId"); 
 
    console.clear(); 
 
    console.log('data function: ' + id); 
 
    }); 
 
});

label { 
 
    padding: 10px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<label class="glyphicon glyphicon-remove-circle cancelTime thex" data-timeid="12">lowercase [data-timeid="12"]</label> 
 
<label class="glyphicon glyphicon-remove-circle cancelTime thex" data-timeid="12">lowercase [data-timeid="12"]</label> 
 
<label class="glyphicon glyphicon-remove-circle cancelTime thex-alt" data-time-id="12">camelCase [data-time-id="12"]</label>