Компактная запись функции

[AlexTrader]

Есть функция, а точнее портянка:

app.ratingTooltipTpl = function (e) {
        var res = "<div id='set-rating" + e.chainId + "'>";
        var rate = e.rating;
        switch (rate) {
            case 0:
                for (var i = 1; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 1:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                for (var i = 2; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 2:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                for (var i = 3; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 3:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=3 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                for (var i = 4; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 4:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=3 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=4 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=5 chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                break;
            case 5:
                for (var i = 1; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                }
                break;
        }
       
        res = res + "</div></br>Баллы:<span id='rating-rate" + e.chainId + "'>"+rate+"</span>";
        return res;
    };

Возможно ли её упростить, укоротить, записать более компактно, использую jqerry?

[AlexTrader]

В каждом кейсе создаётся по 5 спанов, отличающихся только аттрибутом rate (от 1 до 5) и class(либо action-tooltip rating-yellow-star, либо action-tooltip rating-empty)

[Nexus]

AlexTrader, Вы не так давно задавали похожий вопрос.
Почему нельзя проанализировать код, понять что у Вас постоянно повторяется, а какие данные статичны и на основе полученных результатов написать алгоритм, который будет выглядеть в 10 раз компактнее и выполнять эту же работу, но в единственном цикле?

В jQuery нет методов, способных выполнить эту же работу.

[AlexTrader]

Nexus,
Сложность в том, что элементы не полностью повторяются, два аттрибута разные...

[Nexus]

Nexus,
Сложность в том, что элементы не полностью повторяются, два аттрибута разные...

Тут почти тоже самое:
https://javascript.ru/forum/misc/699...tml#post460507
Разное значение принимает 1 атрибут и свойство.

[ksa]

Возможно ли её упростить, укоротить, записать более компактно, использую jqerry?

Да.

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

[ksa]

два аттрибута разные

Значит в объекте будут только 2 свойства...

[ksa]

res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
res += "<span rate=3 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
res += "<span rate=4 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";

Такие сочетания вообще шедевр!

[AlexTrader]

Сделал так:

app.ratingTooltipTpl = function (e) {
        var res = "<div id='set-rating" + e.chainId + "'>";
        var rate = e.rating;
        var spanArr = [];

        for (var i = 1; i <= 5; ++i) {
            spanArr.push("<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>");
        }

        switch (rate) {
            case 1:
                spanArr[0].replace("empty", "yellow-star");
                break;
            case 2:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                break;
            case 3:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                spanArr[2].replace("empty", "yellow-star");
                break;
            case 4:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                spanArr[2].replace("empty", "yellow-star");
                spanArr[3].replace("empty", "yellow-star");
                break;
            case 5:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                spanArr[2].replace("empty", "yellow-star");
                spanArr[3].replace("empty", "yellow-star");
                spanArr[4].replace("empty", "yellow-star");
                break;
        }

        var spans = spanArr.join();
        res += spans;
        res = res + "</div></br>Баллы:<span id='rating-rate" + e.chainId + "'>"+rate+"</span>";
        return res;
    };

Между спанами запятые выводятся...

[AlexTrader]

Поправил

var spans = spanArr.join("");