Если операторы в jquery ведут себя не так, как ожидалось

Question

Я относительно новичок в jQuery. Я пытаюсь создать опрос; в опросе каждый вопрос находится в своем собственном div и раскрывается нажатием кнопки «Далее». У меня просто скрыты все div'ы, кроме текущего. Я пытаюсь написать ответы на объект как я go, чтобы упростить код. На вопросы отвечают радио-кнопки, некоторые текстовые области, некоторые флажки и некоторые варианты выбора. Вот мой код:

$('.next-button').click(function() {
  if ($(this).parent().has('.survey-question-option')) {
    replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
  } else if ($(this).parent().has("textarea")) {
    replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
  }
  console.log(replies);
  $(this).parent().attr('hidden', '');
  $(this).parent().next().removeAttr('hidden');
});

Я регистрирую объект (ответы), чтобы убедиться, что все работает. Поскольку код в настоящее время сформулирован, я получаю ответы на первые два вопроса (оба из которых являются переключателями), добавленные к ответам, но следующие два объекта (текстовые области) заполняются как неопределенные. ({reason: "bill", wish: "newstart", dislike: undefined, like: undefined}). Я попытался сформулировать оператор if как два отдельных оператора:

if ($(this).parent().has('.survey-question-option')) {
  replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
};
if ($(this).parent().has("textarea")) {
  replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
};

, который возвращает неопределенные значения для переключателей, но содержимое двух текстовых областей отображается в объекте. ({reason: undefined, wish: undefined, dislike: "dislike text", like: "like text"}). Проводя некоторое собственное тестирование, я определил, что если оператор if формулируется как будто ... иначе, если формула всегда применяет только оператор if, но если он создан с двумя операторами if, он сначала пропускает thew и идет прямо для второго.

Моя логика c заключается в том, что каждая кнопка «Далее» находится в div с ответами, поэтому я должен иметь возможность посмотреть на родителя кнопки «Далее», найти соответствующий класс и получить Значение. И кажется, что это работает только в 50% случаев, независимо от того, как я это сформулирую.

РЕДАКТИРОВАТЬ: Я прилагаю соответствующие html разделы.

$('.next-button').click(function() {
  if ($(this).parent().has('.survey-question-option')) {
    replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
  } else if ($(this).parent().has("textarea")) {
    replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
  }
  console.log(replies);
  $(this).parent().attr('hidden', '');
  $(this).parent().next().removeAttr('hidden');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="survey">
  <div id="reason" class='radio'>
    <p class="survey-question">What is the primary reason you visit the site? </p>
    <input type="radio" id="bill" name="reason" class="survey-question-option" value="bill">
    <label for="bill" class="survey-question-option-label">To view or pay my bill online</label><br>
    <input type="radio" id="outage" name="reason" class="survey-question-option" value="outage">
    <label for="outage" class="survey-question-option-label">To view or report an outage</label><br>
    <input type="radio" id="start" name="reason" class="survey-question-option" value="start">
    <label for="start" class="survey-question-option-label">To get information about starting or stopping services</label><br>
    <input type="radio" id="hours" name="reason" class="survey-question-option" value="hours">
    <label for="hours" class="survey-question-option-label">To find Frederick Waster's business hours</label><br>
    <input type="radio" id="board" name="reason" class="survey-question-option" value="board">
    <label for="board" class="survey-question-option-label">To get information about Frederick Water's governance or board meetings</label><br>
    <input type="radio" id="devel" name="reason" class="survey-question-option" value="devel">
    <label for="devel" class="survey-question-option-label">To get information about new water or wastewater lines for new development</label><br>
    <input type="radio" id="other" name="reason" class="survey-question-option" value="other">
    <label for="other" class="survey-question-option-label">Other</label><br>
    <div id="other-fill-reason" class="other-fill" hidden>
      <label for="othertext-reason" class="survey-question-option-label">Please specify: </label>
      <input type="text" class="survey-question-other" id="othertext-reason">
    </div>
    <input type="button" class="next-button" id="reason-next" value="Next">
  </div>

  <div id="wish" class='radio' hidden>
    <p class="survey-question">What do you wish the site did better?</p>
    <input type="radio" id="newstart" name="wish" class="survey-question-option" value="newstart">
    <label for="newstart" class="survey-question-option-label">Allow me to pay deposit while starting new service</label><br>
    <input type="radio" id="outinfo" name="wish" class="survey-question-option" value="outinfo">
    <label for="outinfo" class="survey-question-option-label">Provide easier-to-find information about outages</label><br>
    <input type="radio" id="startstop" name="wish" class="survey-question-option" value="startstop">
    <label for="startstop" class="survey-question-option-label">Make it easier to start and stop services</label><br>
    <input type="radio" id="request" name="wish" class="survey-question-option" value="request">
    <label for="request" class="survey-question-option-label">Make it easier to request maintenance for existing service</label><br>
    <input type="radio" id="chat" name="wish" class="survey-question-option" value="chat">
    <label for="chat" class="survey-question-option-label">Let me talk to customer service online</label><br>
    <input type="radio" id="other2" name="wish" class="survey-question-option" value="other">
    <label for="other2" class="survey-question-option-label">Other</label><br>
    <div id="other-fill-wish" class="other-fill" hidden>
      <label for="othertext-wish" class="survey-question-option-label">Please specify: </label>
      <input type="text" class="survey-question-other" id="othertext-wish">
    </div>
    <input type="button" class="next-button" id="wish-next" value="Next">
  </div>

  <div id="dislike" class="textbox" hidden>
    <p class="survey-question">What do you dislike about the site?</p>
    <textarea id="dislike-text" class="like-dislike" cols="100" rows="5" maxlength="500" wrap="soft"></textarea><br>
    <input type="button" class="next-button" id="dislike-next" value="Next">
  </div>
  <div id="like" class="textbox" hidden>
    <p class="survey-question">What do you like about the site?</p>
    <textarea id="like-text" class="like-dislike" cols="100" rows="5" maxlength="500" wrap="soft"></textarea><br>
    <input type="button" class="next-button" id="like-next" value="Next">
  </div>

Answer 1

has() не возвращает логическое значение, он возвращает jQuery объект. Объекты всегда правдивы.

Если вы хотите проверить, находит ли селектор что-либо, проверьте длину результата.

$('.next-button').click(function() {
  if ($(this).parent().find('.survey-question-option').length > 0) {
    replies[$(this).parent().attr('id')] = $(this).parent().find('.survey-question-option:checked').val();
  } else if ($(this).parent().find("textarea").length > 0) {
    replies[$(this).parent().attr('id')] = $(this).parent().find("textarea").val();
  }
  console.log(replies);
  $(this).parent().attr('hidden', '');
  $(this).parent().next().removeAttr('hidden');
});