Question

我正在配置一个聊天机器人，我想为用户提供三个选项以供选择。用户将通过单击按钮来选择选项；这意味着如果单击按钮 1，则输入字段 1 将显示在下一个实例中（相同的 html 文件）。如果点击 2 上的对接，则将显示输入字段 2 等。

在第一张图片中，用户应该选择一个意图，然后根据他们的意图，其中一个输入字段应该在第二张图片中消失。

我尝试过显示和隐藏 CSS 和 JavaScript 的配置。然而它没有用。谁能建议我一个解决方案？诀窍是不能使用显示和隐藏 div 方法，因为输入字段不会与按钮同时显示，而是在选择一个选项之后。提前致谢！

这是一些代码：

function faqact() {
  var x = document.getElementById("python");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
$(document).ready(function() {
  $(".select2_el").select2({});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
  <button id="faqact" onclick="faqact()" type="button">I just want to ask a question</button>
  <button id="alexact" type="button">I want to make the BOT do something for me!</button>
  <button id="connectact" type="button">I want to connect to a human asap!</button>
</div>
different input fields because if the button 1 is clicked, i want the javascript to connect to python through flask.

<div id="conversation" class="chat-input hide">
  <!-- <input type="text" placeholder="Type a message..."> -->
  <form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
    <textarea type="text" id="wisdom" size="80" value="" placeholder="I need a hotel room"> </textarea>
    <div class="input-action-icon">
      <button type="submit" id="completed-task" class="fabutton" onsubmit="return pushChat();">
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
              </button>
    </div>
  </form>

</div>

<div id="python" class="chat-input hide">
  <!-- <input type="text" placeholder="Type a message..."> -->
  <form id="pythonform" style="margin-top: 10px" onsubmit="return pushChat();">
    <textarea type="text" id="faq" size="80" value="" placeholder="I need a hotel room"> </textarea>
    <div class="input-action-icon">
      <button type="submit" id="pythonsend" class="fabutton" onsubmit="return pushChat();">
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
              </button>
    </div>
  </form>

</div>

Answer 1

听起来您基本上想要一个无线电组来控制与按钮关联的可见性，类似于下面的快速概念证明。干杯。

label {
  background-color: #0f0;
  padding: .5rem 1rem;
  margin: .5rem;
  display: block;
  cursor: pointer;
}

input, div, textarea {
  display: none;
}

input[type=radio]:checked + label {
  background-color: #00f;
  color: #fff;
}

#btn1:checked ~ #btn1input {
  display: block;
}
#btn2:checked ~ #btn2input {
  display: block;
}
#btn3:checked ~ #btn3input {
  display: block;
}

<input id="btn1" type="radio" name="test">
<label for="btn1" type="button">Ask a question or something.</label>
<input id="btn2" type="radio" name="test">
<label for="btn2" type="button">Make bot do something.</label>
<input id="btn3" type="radio" name="test">
<label for="btn3" type="button">Talk to a human</label>

<hr>

<input id="btn1input" type="text" placeholder="Ask your question">
<div id="btn2input">
<button>bot stuff1</button><button>bot stuff2</button>
</div>
<textarea id="btn3input" placeholder="Talk to a human"></textarea>

Answer 2

在输入字段中使用只读属性。

所以你在 javascript 中的 if 语句应该是这样的：（这里 x 是您输入字段的 id）

var x= Id_Of_InputField

if (x.hasAttribute("readonly")) {
    x.removeAttribue("readonly")
  } 
else {
    x.addAttribute("readonly")
  }
}

Answer 3

我终于用jquery解决了。我已经制作了我的按钮单选按钮，并最终使用以下脚本来解决我的问题：

$('#startchat').click(function() {
   if($('#radiobutton').is(':checked')) { $("#python").show(); }
});

感谢大家的支持

单击按钮后禁用输入字段

3 个答案: