РЕДАКТИРОВАТЬ: так что после внесения небольших изменений на основе ваших предложений я теперь получаю

Uncaught TypeError: Невозможно прочитать свойство 'toggleClass' из неопределенного

У меня есть HTML-таблица, созданная для цикла, который я пытаюсь изменить цвет границы на основе delivery_avg, который вытягивается с помощью AJAX

Я могу заставить его работать так, чтобы граница менялась на месте (цвет), но я не могу заставить его измениться при доставке в среднем, как вы можете видеть снизу, я пытаюсь заставить его измениться на лайм, если значение меньше 10, оранжевый, если от 10 до 20 и розовый, если от 20 до 30

Данные, передаваемые ajax, отображаются так:

{beacon: "59", location: "YELLOW", delivery_avg: "04.48"}

Так что, надеюсь, это означало бы, что граница ячейки изменилась на известь, но она сохранила свой первоначальный цвет черный.

У кого-нибудь есть идеи, где я ошибся?

Html:

<!doctype html>

<html>
  <head>
    <title>Table</title>
    <style>
    table {
        padding: 10px 30px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }

    table, td, th {
        border: 1px solid black;    
        cellpadding: 5;
        cellspacing: 5;
        text-align: center; 
        vertical-align: middle;
        font-size: 40px;
        background-color: #8F8F8F;
    }
    </style>
    <script> <!-- see javascript below --> </script>
  </head>
  <body>
    <table id='zoning'>
      <tbody></tbody>
    </table>
  </body>
</html>

Javascript:

function addColor() {
{
    if (item.delivery_avg <= 10.00) {
        return ('border-color', 'lime','border-width', 'thick');
    } else if (item.delivery_avg>= 10.01 && item.delivery_avg<= 20.00) {
        return ('border-color', 'brightorange','border-width', 'thick');
    } else if (item.delivery_avg>= 20.01 && item.delivery_avg<= 30.00) {
        return ('border-color', 'pink','border-width', 'thick');
    }
};
}
$(document).ready(function() {
    for (var i = 0; i < 12; i++) {
        var row = $('<tr>').appendTo("#zoning tbody");
        for (var j = 1; j < 11; j++) {
            $(`<td class='${i * 10 + j}'>${i * 10 + j}</td>`).appendTo(row);
        }
    }

    $.get('php/beacon.php', function(response) {
        console.log(response);
        var row;
        response.forEach(function(item, index) {
            console.log(item);
function addColor() {
{
    if (item.delivery_avg <= 10.00) {
        return ('border-color', 'lime','border-width', 'thick');
    } else if (item.delivery_avg>= 10.01 && item.delivery_avg<= 20.00) {
        return ('border-color', 'brightorange','border-width', 'thick');
    } else if (item.delivery_avg>= 20.01 && item.delivery_avg<= 30.00) {
        return ('border-color', 'pink','border-width', 'thick');
    }
};
}
            $(`td.${item.beacon}`).css(addColor() ).toggleClass('coloured');
        });
    });


        function updateTable() {
        //console.log('function called');
        $('td.coloured').css('border-color','black').toggleClass('coloured');
        $.get('php/beacon.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.beacon);
                //$('td.coloured').css('border-color','#black').toggleClass('coloured');
        $(`td.${item.beacon}`).css(addColor()).toggleClass('coloured');
            });
        });

    }
    var updateTableInterval = setInterval(updateTable, 30000);
});
0
Avalon Parkes-Barton 26 Фев 2018 в 17:05

3 ответа

Лучший ответ

Мне удалось изменить код для решения этой проблемы, используя следующие:

function updateTable() {
        //console.log('function called');
        $('td.coloured').css('background-
color','#8F8F8F').toggleClass('coloured');
        $.get('php/del.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.beacon);
                //$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
        $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
        if (item.delivery_avg <= 10.00) {
                return $(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
             } else if (item.delivery_avg >= 10.01 && item.delivery_avg <= 20.00) {
                 return $(`td.${item.beacon}`).css({'border-color':'orange', 'border-width':'thick' }).toggleClass('coloured');
             } else if (item.delivery_avg >= 20.01 && item.delivery_avg <= 30.00) {
                return $(`td.${item.beacon}`).css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
              }
            });
        });

    }
    var updateTableInterval = setInterval(updateTable, 5000);
});
0
Avalon Parkes-Barton 27 Фев 2018 в 10:55

Ваши операторы возврата в addColor неверны. Фактическое значение, которое вы возвращаете, всегда является «толстым», последним элементом. То, что вы должны вернуть - это объект пар свойство-значение, чтобы передать метод jquery css (см. http : //api.jquery.com/css/#css-properties):

if (item.delivery_avg <= 10.00) {
    return ('border-color', 'lime','border-width', 'thick');

Должен стать

if (item.delivery_avg <= 10.00) {
    return { borderColor : 'lime', borderWidth : 'thick' };
0
Onyx Caldin 26 Фев 2018 в 14:16

Я думаю, что вы хотите заменить это

('border-color', 'lime','border-width', 'thick')

С этим:

{'border-color':'lime', 'border-width':'thick' }

Если вы определяли CSS в вызове jQuery, следующее обновляет CSS с помощью нотации классов :

$(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');

Примечание: jQuery поддерживает 'border-color' или 'borderColor' в соответствии с документацией:

Кроме того, jQuery может одинаково интерпретировать CSS и DOM форматирование свойств из нескольких слов. Например, jQuery понимает и возвращает правильное значение для обоих .css ({"background-color": "#ffe", "border-left": "5px solid #ccc"}) и .css ({backgroundColor: "# ffe ", borderLeft:" 5px solid #ccc "}). Обратите внимание, что в нотации DOM кавычки вокруг имен свойств являются необязательными, но в нотации CSS они обязательны из-за дефиса в имени.

EDIT . В приведенном выше примере при обратном вызове $.get передайте параметр в функцию addcolor, а затем измените функцию addColor так, чтобы она находилась вне функции $ .get (там должно быть только 1 определение - просто отметив, потому что я вижу 2 выше):

function addColor(item) {
{
    if (item.delivery_avg <= 10.00) {
        return { 'border-color': 'lime','border-width': 'thick' };
    } else if (item.delivery_avg>= 10.01 && item.delivery_avg<= 20.00) {
        return {'border-color': 'brightorange','border-width': 'thick' };
    } else if (item.delivery_avg>= 20.01 && item.delivery_avg<= 30.00) {
        return { 'border-color': 'pink','border-width': 'thick' };
    }
};

.
.


$.get('php/beacon.php', function(response) {
    console.log(response);
    var row;
    response.forEach(function(item, index) {
        console.log(item);

        $('td." + item.beacon + "').css( addColor(item) ).toggleClass('coloured');
    });
});

Обратите внимание, что если он не находит его, убедитесь, что селектор $('td...' действительно его находит.

1
Brian Mains 26 Фев 2018 в 19:04