Как добавить class если число в блоке меньше 10?

Question

[Neowaring]

Как средствами js или php добавить блоку class active если значение ЧИСЛА в блоке меньше 10 ?

Пример блоков:

<div class="test">3</div>
<div class="test">7</div>
<div class="test">10</div>
<div class="test">23</div>

Comments

[longclaps]

Цифры (а их всего 10) все меньше 10. Даже 9<10.

[Neowaring]

longclaps, Не понял

[Sergey Mukhin]

Neowaring Stalker, он хотел сказать что это число, а не цифра

[longclaps]

Как добавить class если цифра в блоке меньше 10?
Цифры (а их всего 10) все меньше 10. Даже 9<10.

Neowaring Stalker, а так?

[Neowaring]

longclaps, Это типо креативность ума ? ))

[WapSter]

Neowaring Stalker, это элемент обучения. На сколько точный вопрос, на столько точный и ответ)

[Neowaring]

WapSter, Запомню

Answer 1

[Rustam Bainazarov]

Comments

[Rustam Bainazarov]

Pardon Me! Where Do I Find 4giveness?, стрелочник!!11!

[Rustam Bainazarov]

Pardon Me! Where Do I Find 4giveness?, блин, угадал ведь. Ну уж извини, я в самом начале пути :))

[Rustam Bainazarov]

Pardon Me! Where Do I Find 4giveness?, да я понимаю, я же тоже.

[Neowaring]

Рустам Байназаров А как быть если это значение обновляется каждую секунду ?

[Neowaring]

Pardon Me! Where Do I Find 4giveness?, есть пример ? Или скрипт

[Neowaring]

Pardon Me! Where Do I Find 4giveness?, Это js файл он на несколько страниц работает, но если можно было его отключить на одной странице

Скрипт из файла

(function () {
    $.fn.SpecTimer = function (options) {
        return this.each(function () {
            new $.SpecTimer(this, options);
        });
    }
    $.SpecTimer = function (obj, options) {
        this.options = $.extend({
            formatStyle: '1',
            autoStart: false,
            LeadingZero: true,
            OutputHTML: " ",
            TextEnded: " ",
            CountActive: true,
            DateEnd: null
        }, options || {});
        if (this.options.DateEnd == null || this.options.DateEnd == '') {
            return;
        }
        this.timer = null;
        this.element = obj;
        this.CountStepper = -1;
        this.CountStepper = Math.ceil(this.CountStepper);
        this.SetTimeOutPeriod = (Math.abs(this.CountStepper) - 1) * 1000 + 990;
        var dthen = new Date(this.options.DateEnd);
        var dnow = new Date();
        if (this.CountStepper > 0) {
            ddiff = new Date(dnow - dthen);
        } else {
            ddiff = new Date(dthen - dnow);
        }
        gsecs = Math.floor(ddiff.valueOf() / 1000);
        this.CountBack(gsecs, this);
    };
    $.SpecTimer.fn = $.SpecTimer.prototype;
    $.SpecTimer.fn.extend = $.SpecTimer.extend = $.extend;
    $.SpecTimer.fn.extend({
        calculateDate: function (secs, num1, num2) {
            var s = ((Math.floor(secs / num1)) % num2).toString();
            if (this.options.LeadingZero && s.length < 2) {
                s = "" + s;
            }
            if (this.options.formatStyle == 1)return "" + s + ""; else if (this.options.formatStyle == 2) {
                var n = s.split("");
                return "<div class=\"timer_num\"><span>" + n[0] + "</span><span>" + n[1] + "</span></div>";
            }
        }, CountBack: function (secs, self) {
            if (secs < 0) {
                $elem = $(self.element).parent();
                $elem.addClass('ended');
                $elem.empty();
                $elem.prepend('<div>' + self.options.TextEnded + '</div>');
                OutputStr = self.options.OutputHTML.replace(/%%D%%/g, '00');
                OutputStr = OutputStr.replace(/%%H%%/g, '00');
                OutputStr = OutputStr.replace(/%%M%%/g, '00');
                OutputStr = OutputStr.replace(/%%S%%/g, '00');
                self.element.innerHTML = OutputStr;
                return;
            } else if (isNaN(secs) == true) {
                $elem = $(self.element).parent();
                $elem.addClass('ended');
                $elem.empty();
                $elem.prepend('<div>' + self.options.TextEnded + '</div>');
                OutputStr = self.options.OutputHTML.replace(/%%D%%/g, '00');
                OutputStr = OutputStr.replace(/%%H%%/g, '00');
                OutputStr = OutputStr.replace(/%%M%%/g, '00');
                OutputStr = OutputStr.replace(/%%S%%/g, '00');
                self.element.innerHTML = OutputStr;
                return;
            }
            clearInterval(self.timer);
            OutputStr = self.options.OutputHTML.replace(/%%D%%/g, self.calculateDate(secs, 86400, 100000));
            OutputStr = OutputStr.replace(/%%H%%/g, self.calculateDate(secs, 3600, 24));
            OutputStr = OutputStr.replace(/%%M%%/g, self.calculateDate(secs, 60, 60));
            OutputStr = OutputStr.replace(/%%S%%/g, self.calculateDate(secs, 1, 60));
            self.element.innerHTML = OutputStr;
            if (self.options.CountActive) {
                self.timer = null;
                self.timer = setTimeout(function () {
                    self.CountBack((secs + self.CountStepper), self);
                }, (self.SetTimeOutPeriod));
            }
        }
    })
})(jQuery)

[Neowaring]

Pardon Me! Where Do I Find 4giveness?, Вот пример opc-ru.tovmiracle.ru/index.php?route=extension/mod...

[Neowaring]

Активный таймер, у себя на openserver я оставил только дату и получается скрипт на добавление класса не работает потому что я так думаю число обновляется и скрипт не понимает

[Neowaring]

Pardon Me! Where Do I Find 4giveness?, У меня есть код php для вывода даты окончания в таком виде 12/06/2019 0:00:00 , может можно как то вычесть текущую дату и вывести в блок количество оставшихся дней по id или class а после применить тот код который определяет добавлять class или нет

[Rustam Bainazarov]

Neowaring Stalker, я не умею работать с MutationObserver, но примитивно и неправильно можно решить вот так. Лучше, конечно, проверять именно только тот элемент, что вызвал изменение, а не весь массив.

Возможно, Pardon Me! Where Do I Find 4giveness? знает, как сделать это в нормальном виде.

P. S. Функции добавления и изменения контента элементов не используют функцию проверки — её инициализирует именно MutationObserver. Можно поменять у какого-нибудь элемента внутренность вручную, тогда можно будет тоже увидеть его работу.

Answer 2

[WapSter]

Comments

[Neowaring]

А как быть если это значение обновляется каждую секунду ?

[Neowaring]

spoiler

[WapSter]

Neowaring Stalker, https://developer.mozilla.org/ru/docs/Web/API/Muta...