jquery中的if语句表现不正常

Question

我对jQuery相对陌生。我正在尝试进行调查；在调查中，每个问题将在其自己的div中显示，并通过单击“下一步”按钮将其显示出来。除了当前的div，我只是隐藏了所有的div。我在尝试简化代码时尝试将答案写给对象。使用单选按钮，一些文本区域，一些复选框和一些选择来回答问题。这是我的代码：

$('.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并直接执行第二。

我的逻辑是，每个Next按钮都位于带有响应的div中，因此我应该能够查看Next按钮的父级，找到适当的类，并获取值。无论我如何制定，它似乎只能在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');
});