Блог

Главная - Вопросы по программированию - Сохранение имен классов в переменной

Сохранение имен классов в переменной

#javascript #html #css #class

#javascript #HTML #css #класс

Вопрос:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta washere="fgras">
    <title>Mesure de Distance - Page 1</title>
    <style type="text/css">
        
        
        <!-- ****************** Table ****************** -->
        
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px;
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: #ccc;
        }

        tr:nth-child(odd) {
            background-color: #fff;
        }

        th {
            background-color: darkslategray;
            color: white;
        }
        
        
        body{
            font-family:arial;
        }
        
        .valHP {
            background-color: #A0A0A0;
                }

        .valError {
            background-color: #FF00FF;
                }

        .valInsideGood {
            color: #00A000;
            }

        .valInsideBad {
            color: #FF0000;
        }
        
    </style>
    <script type="text/javascript">
        var requestNumber=0;
        var value1Node = null;
        var value2Node = null;
        
        function onData(e, xhr){
            try{
                console.log("onData.event =",e);
                console.log("onData.xhr =",xhr);
                var data = xhr.responseText;
                console.log("data =",data);
                data = data.split("|");
                
                var value1 = Number(data[1]);
                var value2 = Number(data[2]);
                
                value1Node.textContent = value1;
                value2Node.textContent = value2;

                if(value1==0){
                    value1Node.className="valHP";
                    value1Node.textContent="--";
                }else if(value1>=26 amp;amp; value1<=28){
                    value1Node.className="valInsideBad";
                }else if(value1>28 amp;amp; value1<=34){
                    value1Node.className="valInsideGood";
                }else{
                    value1Node.className="valError";
                    value1Node.textContent="err";
                }
                
                
            }finally{
                setTimeout(refreshData,200);
            }
        }
        
        function refreshData(){
            requestNumber  ;
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", (function(e){return onData(e, xhr);}));
            xhr.open("GET", "data.html?t=" requestNumber); //t pour un nom de page unique et éviter le cache
            xhr.send();
        }
        function onPageLoad(){
            value1Node = document.getElementById("val1");

            
            refreshData();
        }
        
    </script>
</head>
<body onload="onPageLoad()">


<div class="table100-body js-pscroll"> 
    <table style="width:50%">
        <thead>
        <tr class="row100 head">
            <th class="cell100 column1">Colonne1</th>
            <th class="cell100 column2">Colonne2</th>
            <th class="cell100 column3">Colonne3</th>
            <th class="cell100 column4">Colonne4</th>
            <th class="cell100 column5">Colonne5</th>
        </tr>
        </thead>
        <tbody>
        <tr class="row100-body">
            <td class="cellColumn"> <span id="val1"></span></td>
            <td class="cellColumn"> Capteur 1= </td>
            <td class="cellColumn"> Distance_Capt_1</td>
            <td class="cellColumn"> Distance_Capt_1</td>
            <td class="cellColumn"> Distance_Capt_1</td>
        </tr>
        

        </tbody>
    </table>
</div> 
    
</body>

Я пытаюсь отобразить данные, которые я получаю от оборудования, на веб-странице в таблице.
В зависимости от того, в каком диапазоне находятся мои полученные данные, мне нужно отобразить их красным и зеленым цветами.

Я определил 4 класса с помощью CSS.

В моей html-части внутри таблицы я хочу назначить классы блокам td, но мои классы хранятся в переменной (value1Node.className) Я пытался td class=value1Node.className , и это не сработало. Я также вставил value1Node.className «» и «, и это не сработало. как я могу это сделать? (Все остальные части кода работают просто отлично)

данные хранятся в значении1, и у меня есть 3 ifs в javascript:

 if (value1 == 0) {
  value1Node.className = "valHP";
  value1Node.textContent = "Out of Range";
} else if (value1 >= 26 amp;amp; value1 <= 28) {
  value1Node.className = "valInsideBad";
} else if (value1 > 28 amp;amp; value1 <= 34) {
  value1Node.className = "valInsideGood";
} else {
  value1Node.className = "valError";
  value1Node.textContent = "err";
} 
 .valHP {
  background-color: #A0A0A0;
}

.valError {
  background-color: #FF00FF;
}

.valInsideGood {
  color: #00A000;
}

.valInsideBad {
  color: #FF0000;
}

Комментарии:

1. пожалуйста, покажите, как вы создаете свои td элементы

2. Пожалуйста, создайте полный и рабочий фрагмент с помощью инструментов <>

3. Что такое value2Node?

4. Зачем обновлять каждые 200 мс — это, вероятно, слишком быстро для сервера

5. value2Node предназначен для вторых данных, которые я еще не начал кодировать. 200 мс — это слишком быстро, я знаю, но данные меняются так быстро, и эта веб-страница будет предназначена для наблюдения. я работаю с аппаратными средствами

Ответ №1:

Для этой цели предназначены атрибуты пользовательских данных HTML5.

Вместо:

  • class="valHP"
  • class="valError"
  • class="valInsideGood"
  • class="valInsideBad"

Вы можете иметь:

  • data-my-value="HP"
  • data-my-value="Error"
  • data-my-value="InsideGood"
  • data-my-value="InsideBad"

и затем в вашем CSS вы можете иметь:

 [data-my-value="HP"] {
  background-color: #A0A0A0;
}

[data-my-value="Error"] {
  background-color: #FF00FF;
}

[data-my-value="InsideGood"] {
  color: #00A000;
}

[data-my-value="InsideBad"] {
  color: #FF0000;
}

Затем в вашем javascript вы можете иметь:

 if (value1 === 0) {
  value1Node.setAttribute('data-my-value', 'valHP');
  value1Node.textContent = "Out of Range";
} else if (value1 >= 26 amp;amp; value1 <= 28) {
  value1Node.setAttribute('data-my-value', 'InsideBad');
} else if (value1 > 28 amp;amp; value1 <= 34) {
  value1Node.setAttribute('data-my-value', 'InsideGood');
} else {
  value1Node.setAttribute('data-my-value', 'Error');
  value1Node.textContent = "err";
}

Если в любой момент вы хотите запросить значение data-value , вы можете использовать dataset :

 value1Node.dataset.myValue  // returns data-my-value

Вы также можете напрямую задавать каждое значение с помощью dataset :

 value1Node.dataset.myValue = 'InsideGood'; // Now: data-my-value="InsideGood"

Зная это, теперь вы можете написать следующее:

 if (value1 === 0) {
  value1Node.data.myValue = 'valHP';
  value1Node.textContent = "Out of Range";
} else if (value1 >= 26 amp;amp; value1 <= 28) {
  value1Node.data.myValue = 'InsideBad';
} else if (value1 > 28 amp;amp; value1 <= 34) {
  value1Node.data.myValue = 'InsideGood';
} else {
  value1Node.data.myValue = 'Error';
  value1Node.textContent = "err";
}

Дальнейшее чтение:

Комментарии:

1. Спасибо. проблема в том, что я не знаю: data-my-value = ? поскольку данные поступают в режиме реального времени, они меняются, и мне нужно, чтобы класс td автоматически определялся самим кодом.

2. не могли бы вы взглянуть на полный код snipet, который я добавил?