web-dev-qa-db-ja.com

jQuery：データ属性を取得

私のhtmlにはspan要素があります：

<span class="field" data-fullText="This is a span element">This is a</span>

そして、data-fullText属性を取得したいと思います。私はこれらの2つの方法を試しましたが、それらは機能しませんでした（両方ともundefinedを返します）：

$('.field').hover(function () {
    console.log('using prop(): ' + $(this).prop('data-fullText'));
    console.log('using data(): ' + $(this).data('fullText'));
});

次に、次の質問を検索して見つけました： データID属性を取得する方法？ および jqueryはデータ属性値を取得できません .
両方の答えは"Use .attr('data-sth') or .data('sth')"です。
.attr()が非推奨になっていることは知っています（jquery-1.11.0では使用しています）が、試してみました。
そしてうまくいきました！

誰かが理由を説明できますか？

javascriptjqueryhtmlcustom-data-attribute
64
Al.G.

.attr() 関数を使用できます。

$(this).attr('data-fullText')

またはlowercase属性名の場合：

data-fulltext="This is a span element"

次に、 .data() 関数を使用できます。

$(this).data('fulltext')

.data()関数は、小文字の属性名のみを想定して動作します。

131
Darin Dimitrov

1。これを試してください：.attr（）

  $('.field').hover(function () {
    var value=$(this).attr('data-fullText');
  $(this).html(value);
});

デモ1：http://jsfiddle.net/hsakapandit/Jn4V3/

2。これを試してください：.data（）

$('.field').hover(function () {
    var value=$(this).data('fulltext');
  $(this).html(value);
});

デモ2：http://jsfiddle.net/hsakapandit/Jn4V3/1/

4
mrdeveloper

これは私のために働く

$('.someclass').click(function() {
    $varName = $(this).data('fulltext');
    console.log($varName);
});
1
Jack Barham

必要に応じてIDとデータ属性を変更してください！

  <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

これが実際の例です： https://jsfiddle.net/ed5axgvk/1/

0
curiousBoy

これは私が思いついたものです：

                $(document).ready(function(){
                
                $(".fc-event").each(function(){
                
                        console.log(this.attributes['data'].nodeValue)  
                });
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='external-events'>
                        <h4>Booking</h4>
                        <div class='fc-event' data='00:30:00' >30 Mins</div>
                        <div class='fc-event' data='00:45:00' >45 Mins</div>
</div>
0
gsam01