使用 data-id 获取元素列表答案

【问题标题】：Get list of elements using data-id使用 data-id 获取元素列表
【发布时间】：2019-12-31 16:27:42
【问题描述】：

我必须有一个带有 data-id 属性的标签元素列表，其中我使用标签值在主容器上设置 img。

函数 changeimage 是返回带有 null 元素的节点列表，但我不知道为什么

有什么解决办法吗？

function getState() {
         try {
             $.ajax({
                 type: "POST",
                 url: "Default.aspx/jsrequest",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (data) {
                        $("#ajax").empty();
                         $.each(data, function () {
                           $("#ajax").append('<div id="ajaxcontent"> 
 </div>');
                              $("#ajaxcontent").addClass("ajaxcontent");
                              $.each(this, function (k, v) {
                               $("#ajaxcontent").append('<div class="view">' 
   + ' <label id="IdOfMachine">' 
    + v.MachineId 
   + '</label>'                                    
   + '<label class="MachineState" data-id= "' 
 + v.MachineId + ' " > '
+ v.CurrentStatus 
  + '</label > '
  + '<img id="ChangeImg" src="">' 
  + '</img>'
  + '<label id="MachineName">' 
  + v.MachineName 
  + '</label>'
  + '</div>');
                         });
                     });
                 },
                 error: function (response) {
                     alert("something wrong")
                 }
             });
         } catch (err) { }
     }



     window.onload = function () {
         getState();
         setInterval(function () {
            getState();
         }, 20000);
     }

     function ChangeImage() {
         let labels = document.querySelectorAll(["data-id"]);
         //here i need to loop over element list and then get lables values to set img which show current state of label 
        }

【问题讨论】：

标签： javascript jquery asp.net .net

【解决方案1】：

你可以把它改成这样：

function ChangeImage() {
  let labels = $('label[data-id]');
  $.each(labels, function(i, x) {
    var text = $(x).text();
  });
}

这应该为您提供来自label 的文本，等于v.CurrentStatus

演示

function ChangeImage() {
  let labels = $('label[data-id]');
  $.each(labels, function(i, x) {
    var text = $(x).text();
    console.log(text);
  });
}

ChangeImage()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label data-id="1">test1</label>
<label data-id="2">test2</label>

【讨论】：

感谢您的快速回答，我明天将在办公室测试它，但在循环中我需要设置依赖于标签状态（活动、错误或其他机器状态）的 img src，一切都在这一个循环是吗？
@Przeklin 你还没有展示你希望 img src 的样子
例如，如果标签值在 img src 中为“活动”，则在标签更改为“错误”时将路径设置为绿色圆圈，它会自动将路径设置为红色圆圈。

【解决方案2】：

为什么不使用 CSS 选择器

function ChangeImage() {
   let labels = $('.MachineState').map(() => {
      let item = {
          id:    $(this).data('id'),
          value: $(this).text()
      }

      let imgUrl = `${item.id}-${item.value}.jpg` // for example
      $(this).closest('img').attr('src', imgUrl)

      return item
   });

}

这将生成这样的对象列表 [{id: 1, value: 'label1'}, {id: 2, value: 'label2'}, ...]

【讨论】：