"データ属性"値を更新できません

Question

アップロードバーを更新する必要があります。すべてが正しいと思っていますが、data-valueを更新することはできません。

HTMLコード：

<div id="Result_Success" class="progress-Bar" data-value="0"></div> 

Javascriptを：

success: function (response) { 
     $("#Result_Success").data('value', response["yuzdelik"]); 
} 

間違いがありますか？

Answer 1

あなたは

javascript $("#Result_Success").attr('data-value', response["yuzdelik"]);

Answer 2

エラーが最後の行（何の引用は必要ありません）である必要があります。

$（ "＃のResult_Success"）のデータ（ '値'、response.yuzdelik）。

Answer 3

もう1つの方法は、要素のdatasetプロパティに直接アクセスして変更する方法です。これを行うには、jQueryオブジェクトでラップされていない生のDOMノードへの参照を取得する必要があります。 jQueryのgetメソッド$("#Result_Success").get(0)を使用するか、を使用してjQueryのarray-like natureを使用して、未処理のDOMノードを取得できます（下の例を参照）。

function setResponse (response) { 
 
     $("#Result_Success")[0].dataset.value = response["yuzdelik"]; 
 
} 
 

 

 
let val = 0; 
 
let timer = setInterval(function() { 
 
    setResponse({yuzdelik: val}); 
 
    if (val >= 100) { 
 
     clearInterval(timer); 
 
    } else { 
 
     val += 25; 
 
    } 
 
    }, 500);

#prog { 
 
    border: 1px #000 solid; 
 
} 
 
#Result_Success { 
 
    height: 20px; 
 
    background: #0f0; 
 
} 
 

 
#Result_Success[data-value="0"] { 
 
    width: 0%; 
 
} 
 

 
#Result_Success[data-value="25"] { 
 
    width: 25%; 
 
} 
 

 
#Result_Success[data-value="50"] { 
 
    width: 50%; 
 
} 
 

 
#Result_Success[data-value="75"] { 
 
    width: 75%; 
 
} 
 

 
#Result_Success[data-value="100"] { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="prog"> 
 
<div id="Result_Success" class="progress-Bar" data-value="0"></div> 
 
</div>

$("#Result_Success").data()を使用して動作しない理由は、それが実際にdata-属性を変更しないということです。 jQueryは.dataのデータセットを内部に格納します。 jQueryは、circular referencesを避けるために要素の属性を変更する代わりにこれを行います。 IEの古いバージョン（特にIE6）では、DOMから要素を削除したときにwould cause memory leaksになってしまったため、DOM要素の循環参照は実際には大きな問題にはなりませんでした。

jQueryはpull any data- attributes into its own internal dataになるため、これが実際に行っていることを少し混乱させることがあります。

data-attributesはデータプロパティに初めてアクセスされた後にアクセスまたは変更されなくなります（すべてのデータ値はjQueryの内部で保存されます）。