또 다른 방법은 요소의 dataset
속성에 직접 액세스하여 속성을 변경하는 것입니다. 그렇게하기 위해서는 원시 DOM 노드에 대한 참조를 가져와야하며 jQuery 객체로 래핑되지 않아야합니다. 아래 예에서와 같이 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을 피하기 위해 요소 속성을 수정하는 대신이 작업을 수행합니다. 요즘 DOM 요소에 대한 순환 참조는 요즘 큰 문제가 아니지만 이전 버전의 IE (특히 IE6)에서는 DOM에서 요소를 제거했을 때
would cause memory leaks 이었기 때문에 IE와 더 관련이있는 경우 다시 나타났습니다.
jQuery가 pull any data-
attributes into its own internal data 일 수 있기 때문에 이것이 실제로하고있는 일이 다소 혼란 스러울 수 있습니다. 문서의 내용 :
데이터 속성은 처음 데이터 속성에 액세스 한 다음 더 이상 액세스하거나 변경하지 않습니다 (모든 데이터 값은 jQuery에서 내부적으로 저장됩니다).
대괄호 표기법 ('response [ "yuzdelik"]')과 점 표기법 ('response.yuzdelik')을 사용하면 [https://developer.mozilla.org/en-US/] docs/Web/JavaScript/Reference/Operators/Property_Accessors), 변경 작업은 아무 것도하지 않습니다. –