Question

我创建了一些输入和下拉菜单，这些输入和下拉菜单被馈送到JavaScript命令中以创建自定义语句。用户输入或选择的任何内容都会添加到句子框架中。当用户选择提交时，将创建该句子。这很简单。尝试为其中一个输入创建条件语句时遇到麻烦。

如果用户在“遏制皮疹”中选择“否”？下拉菜单中，仍然显示“ input5”和“ input6”中的文本。这段文字显示为“在路边有小块皮疹”和“在路边有大块皮疹”。如何更改代码，以便如果选择“否”，这些输入将不会出现在句子中？

当前，如果选择“否”，则读取（**请注意，我添加的第一个输入是“ 2012 VW GTI”，最后一个输入是“红色”）：

“这是我的2012大众GTI。它处于良好状态。车辆的轮辋没有遏制皮疹。车门上没有轻微的遏制皮疹。它在车上有严重的遏制皮疹。2012大众GTI的颜色是红色。”

如果选择“否”，我希望它如何读取：

“这是我的2012大众GTI。它状况良好。车辆的轮辋没有遏制皮疹。2012大众GTI的颜色是红色。”

<!DOCTYPE html>
<html>

  <head>
	<title>Hi</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

	<style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
  .chosen-select {width:200px}
	</style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">

  function sentence() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";

    if (document.getElementById("z1").value == "") {
      alert("Year, Make, and Model are needed");
      document.getElementById("z1").focus();
    }

    else {
      const input1 = document.getElementById("z1").value;

      var input2;
      if (document.getElementById("z2").value == "none") {
        input2 = "The vehicle's rims have no curb rash"
        }
      else if (document.getElementById("z2").value == "yes"){
        input2 = "The vehicle's rims have curb rash"
      }


            var input3 = $('#z3').val();
            console.log(input3);

            var input3Formatted = "";
            if(input3.length==1){
              // Only one value...
              input3Formatted = input3[0];
            }
            if(input3.length==2){
              // Two values... Just add and "and"
              input3Formatted = input3[0]+" and "+input3[1];
            }
            if(input3.length>2){
              // more than 2 values...
              for(i=0;i<input3.length-1;i++){
                input3Formatted += input3[i]+", ";
              }
              input3Formatted += "and "+input3[input3.length-1];
            }


            var input4 = $('#z4').val();
            console.log(input4);

            var input4Formatted = "";
            if(input4.length==1){
              // Only one value...
              input4Formatted = input4[0];
            }
            if(input4.length==2){
              // Two values... Just add and "and"
              input4Formatted = input4[0]+" and "+input4[1];
            }
            if(input4.length>2){
              // more than 2 values...
              for(i=0;i<input4.length-1;i++){
                input4Formatted += input4[i]+", ";
              }
              input4Formatted += "and "+input4[input4.length-1];
            }

            const input5 = "It has minor curb rash on the "+input3Formatted+"."
            const input6 = "It has major curb rash on the "+input4Formatted+"."
            const input7 = document.getElementById("z5").value;




      document.getElementById("s1").value =
        "This is my " +input1+ ". It is in good condition. " +input2+". "+input5+" "+input6+" The "+input1+"'s color is "+input7+"."

    }
  }

  function reset() {
    document.getElementById("s1").value = "";
  }
</script>

<script type="text/javascript">
  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    });

     $("#z2").chosen().change(function(){
      if ($(this).val() === 'none'){
        $("#z3").parent().hide();
        $("#z4").parent().hide();
      }
      else if ($(this).val() === 'yes'){
        $("#z3").parent().show();
        $("#z4").parent().show();
      }
  });


    function hide() {
      $("#z3").parent().hide();
      $("#z4").parent().hide();
    }
    // call hide AFTER .chosen() has been invoked on the visible elements
    hide();

  });
</script>


  </head>

  <body>
    <table>
      <tr>
        <td>
          <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
        </td>
          <td>
            <select data-placeholder="Curb Rash?" name="curbrash" class="chosen-select" id="z2">
              <option value="" disabled selected></option>
              <option value="yes">Yes</option>
              <option value="none">No</option>
            </select>
          </td>
          <td>
            <select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
              <option value=""></option>
              <option value="front left rim">Front Left Rim</option>
              <option value="back left rim">Back Left Rim</option>
              <option value="front right rim">Front Right Rim</option>
              <option value="back right rim">Back Right Rim</option>
            </select>
          </td>
          <td>
            <select data-placeholder="Major Curb Rash" name="majorrash" multiple class="chosen-select" id="z4">
              <option value=""></option>
              <option value="front left rim">Front Left Rim</option>
              <option value="back left rim">Back Left Rim</option>
              <option value="front right rim">Front Right Rim</option>
              <option value="back right rim">Back Right Rim</option>
            </selct>
          </td>
          <td>
            <input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
          </td>
        </tr>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1"></textarea>
    <br>

    <div class="display">
      <button onclick="reset()" id="r1">Reset</button>
    </div>

  </body>
</html>

Answer 1

最简单的方法是将句子保存在变量中，所以这一行：

shopt -s extglob

只会是：

      document.getElementById("s1").value =
        "This is my " +input1+ ". It is in good condition. " +input2+". "+input5+" "+input6+" The "+input1+"'s color is "+input7+"."

然后，您可以在条件内部设置WhateverVariable（如果需要，可以添加input4 / input5），并在继续输入时增加字符串。

使用选择插件的条件语句

1 个答案: