ajax获取查找数据属性值的请求

Question

我想添加样式，其中数据属性值与ajax get请求相同

我的jquery代码:

jQuery(function($) {
get_stock();
function get_stock(){
$.ajax({
url: vdisain_vd.url,
type: 'GET',
success: function(res) {
console.log(JSON.parse(res)); // [ { "unique_id": "Warehouse A available", "available": "1" }, { "unique_id": "Warehouse B available", "available": "0" } ]
$.each(JSON.parse(res), function (i, item) {
console.log($(this).data('shape-title'))
if($(this).data('shape-title') == item.unique_id) {
$(this).attr('style', 'color:blue');
}
console.log('item: ' + item.unique_id)
});
setTimeout(function() { get_stock(); }, 1000)
}
});
}
});

示例如果仓库不可用，我想添加color:blue;，如果可用，则添加color:green;

data-shape-title == unique_id

Answer 1

您需要使用属性选择器来查找data-shape-title属性与unique_id属性相同的元素。

let res = [ { "unique_id": "Warehouse A available", "available": "1" }, { "unique_id": "Warehouse B available", "available": "0" } ];
$.each(res, function(i, item) {
el = $(`[data-shape-title="${item.unique_id}"]`);
if (item.available == "1") {
el.css('color', 'blue');
} else {
el.css('color', 'green');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-shape-title="Warehouse A available">
Warehouse A
</div>
<div data-shape-title="Warehouse B available">
Warehouse B
</div>