单击没有得到“this”的道具数据属性的第一次点击

问题描述：

我有一个简单的html链接，当我点击它时，我想要阅读data属性并更改链接上的属性以及链接文本。单击没有得到“this”的道具数据属性的第一次点击

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

另请注意''.data（）'返回'jquery'，而不是'数据attr'的''值' –

答

要设置一个数据属性，你会使用attr()，而不是prop()。
此外，你必须HTML部分混合起来

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

非常感谢 - 我试图删除问题，因为我意识到我的错误，但你的答案到了那里 - 谢谢 - 我的逻辑失败！ –

答

我更新，以匹配正确的写法逻辑...

这是用 '数据' 属性

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>

单击没有得到“this”的道具数据属性的第一次点击

相关推荐