Question

我有一个聊天系统，我想实现快速回答，用户可以在其中快速回答“我将在5分钟内交付”，“我将在10分钟内交付”或自定义快速回答：“我将交付in“ +数字输入字段值+” minutes“（问题在最后一个）。

工作流程： 1-用户选择快速答案之一 2-然后，使用先前选择的选项中的值填充聊天系统的文本区域

到目前为止，我已经可以使用复选框值填充文本区域。

但是，我还需要自定义数字输入字段中的值。

jQuery
// Only allow one option to be selected
jQuery('#send-information input').on('click', function() {
  jQuery('input:checkbox').click(function() {
    jQuery('input:checkbox').not(this).prop('checked', false);
  });
});

// Gets and sets the value to populate the text area
jQuery('#send-information input').on('change', function() {
  // Checkbox values
  var chosenOption = jQuery('input[name=comment_text]:checked', '#send-information').val();
  // Numeric input value
  var typedOption = 'I will deliver in' + jQuery('#chat-test').val() + ' minutes';
  //Conditinal 
  if (chosenOption) {
    jQuery('.wooconvo-textarea').val(chosenOption);
    if (typedOption)
      jQuery('.wooconvo-textarea').val(typedOption);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form method="post" name="add_comment" id="send-information">
  <div class="form-group">
    <input type="checkbox" name="comment_text" value="I'll deliver in 5 minutes"> I'll deliver in 5 minutes <br>
    <input type="checkbox" name="comment_text" value="I'll deliver in 10 minutes">I'll deliver in 5 minutes<br>
    <input id="chat-test" type="number" name="comment_text2" /><br>
</form>

<form>
  <input type="textarea" class="wooconvo-textarea" />
</form>

如果选择某些选项，并且未使用用户设置的自定义时间值填充文本区域，则我希望该文本区域填充复选框值。

Answer 1

我在这些行中做了一些更改，请看演示，看看这是否是您想要的；

if (chosenOption != undefined) {
  jQuery('.wooconvo-textarea').val(chosenOption);
} else if (typedOption) {
  jQuery('.wooconvo-textarea').val(typedOption);
}

问题在于，根据您的逻辑，每次我们输入if(chosenOption)时，我们也会进入if (typedOption)

演示

jQuery('#send-information input').on('click', function() {
  jQuery('input:checkbox').click(function() {
    jQuery('input:checkbox').not(this).prop('checked', false);
  });
});

jQuery('#send-information input').on('change', function() {
  var chosenOption = jQuery('input[name=comment_text]:checked', '#send-information').val();
  var typedOption = 'I\'ll deliver in ' + jQuery('#chat-test').val() + ' minutes ';
  if (chosenOption != undefined) {
    jQuery('.wooconvo-textarea').val(chosenOption);
  } else if (typedOption) {
    jQuery('.wooconvo-textarea').val(typedOption);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="add_comment" id="send-information">
  <div class="form-group">
    <input type="checkbox" name="comment_text" value="I'll deliver in 5 minutes"> I'll deliver in 5 minutes <br>
    <input type="checkbox" name="comment_text" value="I'll deliver in 10 minutes">I'll deliver in 10 minutes<br>
    <input id="chat-test" type="number" name="comment_text2" /><br>
</form>
Textarea to populate:

<form>
  <input type="textarea" class="wooconvo-textarea" />
</form>

使用选择的选项填充文本区域

1 个答案: