单击没有得到“this”的道具数据属性的第一次点击
问题描述:
我有一个简单的html链接,当我点击它时,我想要阅读data
属性并更改链接上的属性以及链接文本。单击没有得到“this”的道具数据属性的第一次点击
HTML
<a href="#" class="heightSystem" data-heightSystem="imperial">change to metres & cm</a>
jQuery的
var cb = {};
cb.domChange = {
heightSystem: function(){
if($(this).prop('data-heightSystem') == 'metric'){
$(this)
.prop('data-heightSystem', 'imperial')
.html('change to feet & inches');
} else {
$(this)
.prop('data-heightSystem', 'metric')
.html('change to metres & cm');
}
}
}
// click handler
$('.heightSystem').click(cb.domChange.heightSystem);
问题
的变化只发生在第一次点击后 - 从第二点击开始,一切正常因为它应该 - 这是为什么?
当我console.log($(this).prop('data-heightSystem'))
我的第一次点击
得到undefined
也试过,但没有出于某种原因在所有的工作?
if($(this).data('heightSystem') == 'metric'){ ... }
答
要设置一个数据属性,你会使用attr()
,而不是prop()
。
此外,你必须HTML部分混合起来
var cb = {};
cb.domChange = {
heightSystem: function() {
if ($(this).attr('data-heightSystem') == 'metric') {
$(this).attr('data-heightSystem', 'imperial')
.html('change to metres & cm');
} else {
$(this).attr('data-heightSystem', 'metric')
.html('change to feet & 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 & cm</a>
+0
非常感谢 - 我试图删除问题,因为我意识到我的错误,但你的答案到了那里 - 谢谢 - 我的逻辑失败! –
答
我更新,以匹配正确的写法逻辑...
这是用 '数据' 属性
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 & inches');
} else {
$(elem).data('heightsystem', 'imperial');
$(elem).html('change to metres & 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 & cm</a>
另请注意''.data()'返回'jquery',而不是'数据attr'的''值' –