Question

我有一个调查构建器，我已设置为根据问题是或否来触发问题。例如，我有一个这样的表格。

谢谢任何反馈都会很棒。：）

您最近在使用我们的软件时遇到过任何技术问题吗？是否

如果no，则不应再提出问题，但是如果yes $(function(){ $('body').on('change', '.parent_question select, .parent_question input', function(){ var child_input = $('[name="' + $(this).data('child-name') + '"]'); console.log(child_input); var child_question = child_input.closest('.survey_answers'); var trigger_on = $(this).data('trigger-on'); var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on; if (show) { child_question.show(); } else { child_question.hide(); child_input.val(''); child_input.attr('checked', false); console.log(child_input); child_input.trigger('change'); } }); });出现下一个问题并且出于某种原因使用下面的问题，那么最后一个问题就会弹出JavaScript，它为问题返回false，但然后再循环，直到它为假。

public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // view.loadUrl(url); REMOVE!!!
    return false;
}

Answer 1

在我们发表评论之后，我认为我的工作方式与你想要的一样。没有对HTML的更改，但我使用的JQuery如下：

$(function() {
  $('#survey_page').on('change',
    '.parent_question select, .parent_question input',
    function() {
      console.log($(this).attr('name') + " selected: " + $(this).val());
      var child_input = $('[name="' + $(this).data('child-name') + '"]');
      //console.log(child_input);
      var child_question = child_input.closest('.survey_answers');
      var trigger_on = $(this).data('trigger-on');
      var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
      console.log("Show child (" + $(this).data('child-name') + "): " + show);
      if (show) {
        child_question.show();
      } else {
        child_question.hide();
        child_input.val('');
        child_input.attr('checked', false);
        console.log(child_input);
        if (child_input.is("textarea")) {
          console.log("Next item is textarea, triggering change.");
          child_input.trigger('change');
        }
      }
    });
});

以下是一个工作示例：https://jsfiddle.net/Twisty/16tw7q3j/4/

如果用户有条件地选择特定答案，则会暴露更多问题。如果用户返回并更改了答案，则应重置子项目的条件。

我已将change事件从body移至#survey_page，但两者都应该有效。如果子输入是textarea，我还有条件地触发更改，我认为这有助于防止循环。如果它不能按你的意愿工作，请随意测试和评论。不确定我的测试小提琴是否与您的环境完全匹配。

<强>更新

目前这可能有点矫枉过正，但它有效：https://jsfiddle.net/Twisty/16tw7q3j/9/

$(function() {
  $('body').on('change', '.parent_question select, .parent_question input', function() {
    var current_input_name = $(this).prop('name');
    var current_input_id = parseInt(current_input_name.substring(24, 26));
    var last_input_name = $(".parent_question:last [name^='survey[answers]']").prop('name');
    var last_input_id = parseInt(last_input_name.substring(24, 26));
    console.log("Change " + current_input_name + "/" + last_input_name + ", " + current_input_id + "/" + last_input_id);
    var child_input = $('[name="' + $(this).data('child-name') + '"]');
    var child_question = child_input.closest('.survey_answers');
    var trigger_on = $(this).data('trigger-on');
    var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
    if (show) {
      child_question.show();
    } else {
      child_question.hide();
      child_input.val('');
      child_input.prop('checked', false);
    }
    for (var i = current_input_id + 2; i <= last_input_id; i++) {
      console.log("Clearing survey[answers][question" + i + "]");
      var nextElem = $("[name='survey[answers][question" + i + "]']");
      nextElem.parents("div.survey_answers").hide();
      nextElem.val('');
      nextElem.prop('checked', false);
    }
  });
});

我在当前更改的元素之间创建范围，跳过子元素，因为已经有条件地处理了它，并清除了所有其他选择。

Answer 2

$(function(){
  $('body').on('change', '.parent_question select, .parent_question input', function(){
    var child_input = $('[name="' + $(this).data('child-name') + '"]');
    var child_question = child_input.closest('.survey_answers');
    var trigger_on = $(this).data('trigger-on');
    var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
    if (show) {
      child_question.show();
    } else {
      child_question.hide();
      child_input.val('');
      child_input.prop('checked', false);
    }
  });
});

此代码解决了我遇到的问题，但现在我想清除所有child_questions值并隐藏所有子问题，如果有人更改答案。 @Twisty任何想法？

触发＆＃39;改变＆＃39;循环回功能

2 个答案: