Компактная запись функции
Есть функция, а точнее портянка:
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? |
В каждом кейсе создаётся по 5 спанов, отличающихся только аттрибутом rate (от 1 до 5) и class(либо action-tooltip rating-yellow-star, либо action-tooltip rating-empty)
|
AlexTrader, Вы не так давно задавали похожий вопрос.
Почему нельзя проанализировать код, понять что у Вас постоянно повторяется, а какие данные статичны и на основе полученных результатов написать алгоритм, который будет выглядеть в 10 раз компактнее и выполнять эту же работу, но в единственном цикле? В jQuery нет методов, способных выполнить эту же работу. |
Nexus,
Сложность в том, что элементы не полностью повторяются, два аттрибута разные... |
Цитата:
https://javascript.ru/forum/misc/699...tml#post460507 Разное значение принимает 1 атрибут и свойство. |
Цитата:
Как вариант, сделай массив объектов, где у свойств будут нужные значения. Т.о. останется просто собрать нужную строку с использованием нужного элемента массива... |
Цитата:
|
Цитата:
|
Сделал так:
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; }; Между спанами запятые выводятся... |
Поправил
var spans = spanArr.join(""); |
Часовой пояс GMT +3, время: 05:43. |