Question

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

Answer 1

尝试使用.attr（）设置data-tabtoggle属性：

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

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

Answer 2

它实际上是在改变数字，但它是一个文本值，所以你必须使用引号。

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

见修订小提琴：

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

动态更改Data属性值

2 个答案: