动态更改数据属性值

我想使用我的jq脚本更改div内的data-tabtoggle属性。我的代码应该更改值，然后动态更改html。但什么也没有发生：HTML动态更改数据属性值

<div id="Tab9" class="AllTabs JQApproval" data-tabtoggle="9" data-PlaceholderName = "Location" 
     style="font-size:12px; " >Sales Approval 
    <div id="Location"></div> 
    </div>

我的脚本

$('.JQApproval').click(
function() { 

var ApprovalValue = $(this).attr('data-tabtoggle'); 

var PlaceHolder = $(this).attr('data-PlaceholderName') ; 
var NewApprovalValue 

if (ApprovalValue === '9') { NewApprovalValue = '2' ; } ; 
if (ApprovalValue === '2') { NewApprovalValue = '1' } ; 
if (ApprovalValue === '1') { NewApprovalValue = '9' } ; 

// Make new data attribute 
$('#Tab9').data('tabtoggle',20); 

// test outcome 
$("#" + PlaceHolder).html(NewApprovalValue); 


});`

我需要的HTML，以反映变化，但一点儿也不

任何帮助，将不胜感激！

Fiddle

来源

2016-06-10 Mick

尝试.attr（）来设置数据tabtoggle属性：

演示：https://jsfiddle.net/fvmw6Lsc/

$('#Tab9').attr('data-tabtoggle',20);

来源

2016-06-10 14:08:46

谢谢，但如果你在事件发生后看HTML，数据tabtoggle值仍然是9，我希望它是20？ – Mick

它的工作原理Dhara谢谢你。但我只是想知道为什么在google检查页面查看html不更新？ – Mick

它实际上是换号，但它是一个文本值，所以你必须使用引号。

$('#Tab9').data('tabtoggle','20'); 
alert($('#Tab9').data('tabtoggle'));

参见修订小提琴：

https://jsfiddle.net/LdaLu4mb/8/

来源

2016-06-10 14:10:24 gibberish

谢谢但是如果你看看事件发生后的HTML，data-tabtoggle的值仍然是9，我预计它会是20？ – Mick

是的，但是你不能按照你在这种情况下看到的。警报代码获取当前DOM状态的实际值，并且您可以看到它警告了20. :)引导Richard Pryor：*您相信我，还是您自己的眼睛？* – gibberish

动态更改数据属性值

回答

相关问题