動態更改數據屬性值

我想使用我的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

動態更改數據屬性值

回答

相關問題