JS / jQuery - отображение результатов на основе пользовательского ввода

Question

Я думал об этом проекте, который взял на себя, теперь мне нужна форма, которая будет содержать список вопросов, простые вопросы «да / нет», которые при ответе и отправке будут динамически возвращать соответствующие данные на той же странице. Поэтому изначально все ответы будут загружены на страницу, а затем скрыты, и я планирую выбрать и вернуть данные, предоставив каждому элементу класс для каждого вопроса, а также, будет ли это да или нет. Что-то вроде class="q1_0 q2_1 q3_1 q4_0", где 0 - нет, а 1 - да. Считаете ли вы это хорошим способом решения этой проблемы или это будет более простой вариант? Подводя итог, я хочу посмотреть, имел ли кто-нибудь дело с плагином jQuery, который мог бы помочь с этим? Любая помощь, как всегда, очень ценится.

Спасибо,

-Josh

Answer 1

То, что вы описываете, будет работать, хотя я, конечно, не знаю ни одного плагина, который бы помог с этим. Однако, если вы выберете такой подход, вы должны быть абсолютно уверены, что никогда не будет более сложной логики, чем «q1 yes, q2 no». Например, если вам когда-либо понадобится «q1 да, q2 да или q4 нет» в качестве условия отображения вопроса, то ваша схема не сможет справиться с этим, и вы в итоге будете либо взламывать что-то грязное, либо переписывать всю свою систему .

Если вы думаете, что вам может понадобиться более сложная логика позже, я бы порекомендовал реализовать вещи в чистом JS. Например:

function isYes(i) {
  return $("#question" + i).is(":checked");
}
var question1 = ["Is red your favorite color?", function() {
  return isYes(1);
}];
var question2 = ["Are dogs your favorite pet?", function() {
  return isYes(1) && (isNo(4) || isYes(7);
}];

Что-то в этом роде (плюс логика для рендеринга вопросов и обработчик onChange для них, который запускает проверку, должен ли отображаться вопрос или нет).

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

Answer 2

Хорошо, давайте предположим, что вы используете флажки, чтобы дать пользователю возможность ответить да / нет на ваши вопросы.Далее предположим, что порядок ваших вопросов отражает порядок, в котором ваши ответы выложены на вашей странице.Тогда вам понадобится что-то вроде этого:

<ul>
    <li class="relevant_data">Hi, I'm quite relevant to question 1</li>
    <li class="relevant_data">Hi, I'm quite relevant to question 2</li>

....

<input type="checkbox" class="question"/> Are you hungry?
<input type="checkbox" class="question"/> Are you thirsty?  

Нет для части jQuery:

$questions = $('input.question');
$questions.bind('click', function() {
    var pos = $questions.index(this),
        item = $('ul li.relevant_data:eq('+pos+')');

    this.checked ?
        item.hide() : item.show();
});

Надеюсь, это поможет.