Question

我有一个简单的html链接，当我点击它时，我想阅读data属性并更改链接上的属性以及链接文本。

HTML

<a href="#" class="heightSystem" data-heightSystem="imperial">change to metres &amp; cm</a>

的jQuery

var cb = {};

cb.domChange = {
    heightSystem: function(){
        if($(this).prop('data-heightSystem') == 'metric'){
            $(this)
                .prop('data-heightSystem', 'imperial')
                .html('change to feet &amp; inches');
        } else {
            $(this)
                .prop('data-heightSystem', 'metric')
                .html('change to metres &amp; cm');
        }
    }
}

// click handler
$('.heightSystem').click(cb.domChange.heightSystem);

问题

更改只发生在第一次点击后 - 从第二次点击开始，一切正常运作 - 为什么会这样？

当我console.log($(this).prop('data-heightSystem'))时，我在第一次点击时获得undefined

还试过但由于某种原因根本没有工作？

if($(this).data('heightSystem') == 'metric'){ ... }

Here's a fiddle showing the issue

Answer 1

要设置数据属性，您可以使用getElementsByClassName而不是attr()。
此外，您将HTML部分混淆了

＆＃13;

prop()

＆＃13;

var cb = {};

cb.domChange = {
    heightSystem: function() {
        if ($(this).attr('data-heightSystem') == 'metric') {
            $(this).attr('data-heightSystem', 'imperial')
                   .html('change to metres &amp; cm');
                
        } else {
            $(this).attr('data-heightSystem', 'metric')
                   .html('change to feet &amp; inches');
        }
    }
}

$('.heightSystem').click(cb.domChange.heightSystem);

＆＃13;

Answer 2

我更新了逻辑以匹配正确的措辞......

这是使用'数据'属性

var cb = {};

cb.domChange = {
  heightSystem: function() {
    var elem = $('.heightSystem');
    var elemData = $(elem).data('heightsystem');

    if (elemData === 'imperial') {
      $(elem).data('heightsystem', 'metric');
      $(elem).html('change to feet &amp; inches');

    } else {
      $(elem).data('heightsystem', 'imperial');
      $(elem).html('change to metres &amp; cm');

    }
  }
}

$(function() {
  $('a.heightSystem').on('click', cb.domChange.heightSystem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="heightSystem" data-heightSystem="imperial">change to metres &amp; cm</a>

点击不会获得＆＃34;这个＆＃34;的支柱数据属性。在第一次点击

2 个答案: