Как написать функцию выделения правильного ответа?

Question

[N7EIght]

У меня есть такой код:

if ($('.trueOneQuest' + i).attr('src') == '../assets/img/checkbox_active.jpg') {
    valueBlockTest.push('<label class="testTitle">' + $('.checkAnswer' + i).val() + '</label><br><ul class="ul w-25 check"><li class="checkOneLi' + i + ' trueCheck">' + $('.checkOneQuest' + i).val() + '</li><li class="checkTwoLi' + i + '">' + $('.checkTwoQuest' + i).val() + '</li><li class="checkThreeLi' + i + '">' + $('.checkThreeQuest' + i).val() + '</li><li class="checkFourLi' + i + '">' + $('.checkFourQuest' + i).val() + '</li></ul>');
} else if ($('.trueTwoQuest' + i).attr('src') == '../assets/img/checkbox_active.jpg') {
    valueBlockTest.push('<label class="testTitle">' + $('.checkAnswer' + i).val() + '</label><br><ul class="ul w-25 check"><li class="checkOneLi' + i + '">' + $('.checkOneQuest' + i).val() + '</li><li class="checkTwoLi' + i + ' trueCheck">' + $('.checkTwoQuest' + i).val() + '</li><li class="checkThreeLi' + i + '">' + $('.checkThreeQuest' + i).val() + '</li><li class="checkFourLi' + i + '">' + $('.checkFourQuest' + i).val() + '</li></ul>');
} else if ($('.trueThreeQuest' + i).attr('src') == '../assets/img/checkbox_active.jpg') {
    valueBlockTest.push('<label class="testTitle">' + $('.checkAnswer' + i).val() + '</label><br><ul class="ul w-25 check"><li class="checkOneLi' + i + '">' + $('.checkOneQuest' + i).val() + '</li><li class="checkTwoLi' + i + '">' + $('.checkTwoQuest' + i).val() + '</li><li class="checkThreeLi' + i + ' trueCheck">' + $('.checkThreeQuest' + i).val() + '</li><li class="checkFourLi' + i + '">' + $('.checkFourQuest' + i).val() + '</li></ul>');
} else if ($('.trueFourQuest' + i).attr('src') == '../assets/img/checkbox_active.jpg') {
    valueBlockTest.push('<label class="testTitle">' + $('.checkAnswer' + i).val() + '</label><br><ul class="ul w-25 check"><li class="checkOneLi' + i + '">' + $('.checkOneQuest' + i).val() + '</li><li class="checkTwoLi' + i + '">' + $('.checkTwoQuest' + i).val() + '</li><li class="checkThreeLi' + i + '">' + $('.checkThreeQuest' + i).val() + '</li><li class="checkFourLi' + i + ' trueCheck">' + $('.checkFourQuest' + i).val() + '</li></ul>');
} else {
    valueBlockTest.push('<label class="testTitle">' + $('.checkAnswer' + i).val() + '</label><br><ul class="ul w-25 check"><li class="checkOneLi' + i + '">' + $('.checkOneQuest' + i).val() + '</li><li class="checkTwoLi' + i + '">' + $('.checkTwoQuest' + i).val() + '</li><li class="checkThreeLi' + i + '">' + $('.checkThreeQuest' + i).val() + '</li><li class="checkFourLi' + i + '">' + $('.checkFourQuest' + i).val() + '</li></ul>');
}

С помощью него можно выделить ответ как правильный, но получится выделить только 1. Как можно этот код изменить так, чтобы можно было выделять до 3 ответов из 4. Элементы создаются с помощью js.

И кому не сложно, можете проанализировать код и указать на ошибки?

Comments

[coderisimo]

очень полезно использовать например https://codepen.io/ . Там вы можете создать песочницу со своим кодом и спокойно расшарить ее здесь. Так все желающие смогут вам помочь без лишних временных затрат. Что , согласитесь, важно.

Answer 1

[Дмитрий Свиридов]

Первое, что приходит на ум - это else if заменить на просто if. Чтобы при обработке одного условия проверялись и остальные. Ну и переменную count добавь, которая перед всеми проверками равна нулю. Если попало в if, то увеличивай его на 1. А в каждом if еще добавь условие && count <= 3. Но вообще этот представленный код не выглядит качественным сам по себе, мягко говоря.

Comments

[N7EIght]

Я уже задавал такой вопрос на startoverflow, но мне там точно также сказали, не объяснив именно в чём ошибка. Не могли бы вы указать на мои ошибки, т.е. в чём он не качествен.

[Дмитрий Свиридов]

N7EIght, ну, лично мне не нравится, например, портянка из ифаков. Если вопросов будет больше - еще добавишь нужное количество проверок? Да, я понимаю, что у тебя у элементов разные классы: trueTwoQuest, trueThreeQuest и т.д., но можно им сделать общий класс, добавить каждому какой-то data-атрибут (это чисто пример) и циклом пройтись, выбрав все эти элементы по общему классу. Если значение дата-атрибута равно чему-то там, то добавлять элементу класс, у которого background-color: red (например). А не проверять какие-то пути к картинкам с "../" причем, что как бы уже "попахивает" дурно.

Добавление каких-то кусков html в виде строк - тоже такой себе подход. Я понимаю, что многие так делают, но лично на мой взгляд, это уродство. Есть шаблонизаторы, например, позволяющие это дело как-то более приятно реализовать.

br делать для отступа можно, но я бы сделал лучше css-класс с нужным margin-bottom.

$('.checkAnswer' + i).val() ты можешь сделать один раз где-то перед всеми проверками и добавить это значение в переменную, а потом ссылаться на нее. Это будет выглядеть приятнее, чем в каждый ифак пихать $('.checkAnswer' + i).val().