javascript - 将 attr 添加到 img 并设置路径时出现问题

Question

我有一个小问题，因为我读取了标签的值，之后我想根据值标签设置 img src

这里有一些代码，我发现这是 img attr 不要添加

getState 生成带有内容的 div

最后是ajax调用函数，我从数据库获取值并将它们写入动态生成的标签

现在的主要问题是，无法正确读取标签的值，因为我有 3 个标签，具有 3 个不同的状态，例如“事件”、“待机”、“错误”，并且它为所有紧急停止图标设置了

 function ChangeImage() {
         let labels = $('label[data-id]');
         $.each(labels, function (i, x) {
             var states = $(x).text();
             console.log(states);
             if (states == "Active") {
                 var Active = "Images/kafle/zebatakActive.svg";
                 $(this).closest('img').attr("src", Active);
             } else if (states == "Standby") {
                 var Standby = "Images/kafle/kafle_zebatka-01.svg"
                 $(this).closest('img').attr("src", Standby);
             } else if (states == "Error") {
                 var error = "Images/kafle/kafle_zebatka-01.svg";
                 $(this).closest('img').attr("src", error);
             } else if (states == "Setting") {
                 var Settings = "Images/kafel/kafle_zebatka-03.svg"
                 $(this).closest('img').attr("src", Settings);
             } else {
                 var Emergency = "Images/kafle/kafle_status-yel-yel.svg";
                 $(this).closest('img').attr("src", Emergency);
             }
         });
     }

 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" name="Values" data-id= "' + v.MachineId + ' " > ' + v.CurrentStatus + '</label > '
                                 + '<img class="ChangeImg" data-id="' + v.MachineId + '"> ' + '</img > '
                                 + '<label id="MachineName">' + v.MachineName + '</label>' + '</div>');
                         });
                     });
                 },
                 error: function (response) {
                     alert("cos źle")
                 }
             });
         } catch (err) { }
     }

 public static List<StateOfMachine> jsrequest()
    {
        List<StateOfMachine> MachineState = new List<StateOfMachine>();
        string DBInfo = @"Data Source=STACJA45;Initial Catalog=AutoRefresh;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False";
        string sqlrequest = "Select MachineID,CurrentStatus,MachineName from MachineStates";

        SqlConnection connection = new SqlConnection(DBInfo);
        SqlCommand command = new SqlCommand(sqlrequest, connection);
        connection.Open();
        SqlDataReader DataReader = command.ExecuteReader();
        while (DataReader.Read()) {
            StateOfMachine machines = new StateOfMachine();
            machines.MachineId = DataReader["MachineID"].ToString();
            machines.MachineName = DataReader["MachineName"].ToString();
            machines.CurrentStatus = DataReader["CurrentStatus"].ToString();

            MachineState.Add(machines);
        }
        DataReader.Close();
        command.Dispose();
        connection.Close();
        return MachineState;

    }

Answer 1

首先，欢迎来到 StackOverflow :)

将来代码中要避免的两件事:

• DRY:不要重复 - 每次你一遍又一遍地写同样的事情时，你就做错了:)
• 准确地说，始终使用 === 而不是 == ，后者将为 1 == "提供 true 1"，最好从一开始就避免它。

关于你的问题，除了重复自己和使用 == 你指定 $(this) ，只要你传递一个 jQuery 就可以了事件，因为它是一个 self 函数，对象 this 不是您所假设的。

您的代码可以更改为:

function ChangeImage() {
     var labels = $('label[data-id]');
     $.each(labels, function (i, x) {
         var url = '';
         var path = 'Images/kafle';
         var state = $(x).text();

         switch(state) {
             case "Active": url = path + "/zebatakActive.svg"; break;
             case "Standby": url = path + "/kafle_zebatka-01.svg"; break;
             case "Error": url = path + "/kafle_zebatka-01.svg"; break;
             case "Setting": url = path + "/kafle_zebatka-03.svg"; break;
             default: url = path + "/kafle_status-yel-yel.svg"; break;
         }
         $('img[data-id="' + state + '"]').attr("src", url);

         console.log({path, state, url});
     });
 }

根据评论编辑代码