2017-12-25 3 views
2

업로드 막대를 업데이트해야하며 모든 것이 사실이라고 생각하지만 data-value을 업데이트 할 수 없습니다."데이터 속성"값을 업데이트 할 수 없음

HTML 코드 :

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

자바 스크립트 :

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

실수는?

답변

1

당신은

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

-1

오류가 마지막 줄에 (더 필요 인용) 필요가 없습니다 :

$ ("#의 Result_Success을") 데이터 ('값', response.yuzdelik을).

+0

대괄호 표기법 ('response [ "yuzdelik"]')과 점 표기법 ('response.yuzdelik')을 사용하면 [https://developer.mozilla.org/en-US/] docs/Web/JavaScript/Reference/Operators/Property_Accessors), 변경 작업은 아무 것도하지 않습니다. –

0

또 다른 방법은 요소의 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에서 내부적으로 저장됩니다).

관련 문제