如何在html div中獲取數據值？

Question

我可以在div中獲得所有條目的屬性，例如樣式顯示。 但我無法以相同的方式獲取數據值。 我需要找到正確的語法來獲取所有數據值條目。

  $.ajax({
      url:"{{ url_for('fetch_bar') }}",
      type:"post",
      dataType: "json",
      async: true,
      success:function(response){
        var response = JSON.parse(response);
        var len = Object.keys(response).length;

        var selects = document.querySelectorAll("select[id=select_host]");
        var bars = document.querySelectorAll("[id=ldBar]");
        if (len == 1) {
           ....
        }
        else if (len > 1)
          for( var ind = 0; ind < len; ind++){
            for (var index = 0; index < selects.length ; index++)
              if (selects[index].value == response[ind].hostname)
                // alert(bars[index].style.display)
                alert(bars[index].data-value)
                // alert(bars[index].[data-value])

                  <td>

                        <input id="stage" type="button" class="btn-primary" onclick="readTextFile();"  name="stage" value="{{entry.stage}}" >
                        <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
                  </td>
                  <td>

Answer 1

使用.getAttribute("data-value")獲取值

 console.log(document.querySelector('#ldBar').getAttribute("data-value")) 

  <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div> 

Answer 2

如果要使用jQuery獲取元素的data-value ：

 console.log($("div").data("value")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-value=10><div> 

香草JS：

 console.log(document.querySelector('div').getAttribute("data-value")); 

 <div data-value=10></div> 

數據集：

 console.log(document.querySelector('div').dataset.value); 

 <div data-value=10><div> 

Answer 3

如果您有事件，則可以通過以下方式簡單地使用它：

const { dataset: { value }} = e.target;

或者您可以使用JQuery直接獲取它：

$("#your_element_id").data("value")

Answer 4

要使用jQuery從元素獲取data屬性，請使用以下語法：

$("#your_element_id").data("value")

請注意，如果您在html中這樣寫： <div id='test' data-testID='1'></div>

在jQuery中，您將像這樣訪問它：

$("#test").data("testid");

由於所有數據屬性均以小寫形式返回

Answer 5

您可以像這樣使用dataset ：

 const ldBar = document.getElementById("ldBar") console.log( ldBar.dataset.value, ldBar.dataset.preset, ldBar.dataset.aspectRatio // Note the conversion to camelCase ); 

 <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%; display: block;" ></div> 

（請參閱： https : //developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ）

Answer 6

HTML代碼：

<td>
    <input id="stage" type="button" class="btn-primary" onclick="readTextFile();"  name="stage" value="{{entry.stage}}" >
    <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
</td>

JS代碼：

var abc = $('td').find('#ldBar').attr('data-value');