[英]How to get data-value in the html div?
I can get all entries' attribute like style display in the div. 我可以在div中获得所有条目的属性,例如样式显示。 but I can't get the data-value from the same way.
但我无法以相同的方式获取数据值。 I need find a correct syntax to get the all data-value entries.
我需要找到正确的语法来获取所有数据值条目。
$.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>
使用.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>
If you want to get data-value
of the element with jQuery: 如果要使用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>
Vanilla JS: 香草JS:
console.log(document.querySelector('div').getAttribute("data-value"));
<div data-value=10></div>
Dataset: 数据集:
console.log(document.querySelector('div').dataset.value);
<div data-value=10><div>
If you have event then you can simply use it by: 如果您有事件,则可以通过以下方式简单地使用它:
const { dataset: { value }} = e.target;
or you can directly get it by using JQuery: 或者您可以使用JQuery直接获取它:
$("#your_element_id").data("value")
To get the data
attribute from an element using jQuery use this syntax: 要使用jQuery从元素获取
data
属性,请使用以下语法:
$("#your_element_id").data("value")
Just note that if you write it like this in your html: <div id='test' data-testID='1'></div>
请注意,如果您在html中这样写:
<div id='test' data-testID='1'></div>
In jQuery you will access it like this: 在jQuery中,您将像这样访问它:
$("#test").data("testid");
As all the data properties are returned as lowercase 由于所有数据属性均以小写形式返回
You can use dataset
, like this: 您可以像这样使用
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>
(See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ) (请参阅: https : //developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes )
HTML CODE: 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 CODE: JS代码:
var abc = $('td').find('#ldBar').attr('data-value');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.