Question

我正在尝试根据输入值调用特定的div。以下是预期结果

如果输入字段结果中的类型“ one”应显示为“ Page one”，如果输入字段结果中的类型“二”应为“第二页”，如果在输入字段结果中键入其他任何内容，则应为“第三页”

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
  <div id="one" name="one" style="display:none;">
    <h1>Page One</h1>
  </div>

  <div id="two" name="two" style="display:none;">
    <h1>Page Two</h1>
  </div>

  <div id="three" name="three" style="display:none;">
    <h1>Page Three</h1>
  </div>
  <input type="text" id="enter" name="enter" value="" />
  <input type="button" value="Click here" onclick="test();">
<script>
function test() {
  var v_input = document.getElementById("enter").value;
  var v_one = "one";
  var v_one = "two";
  if (v_input = v_one) {

    $('#one').show();
    $('#two').hide();
    $('#three').hide();
  } else if (v_input = v_two) {
    $('#one').hide();
    $('#two').show();
    $('#three').hide();
  } else {
    $('#one').hide();
    $('#two').hide();
    $('#three').show();
  }
}
</script>
</body>

请，请先提出解决此问题的建议，

Answer 1

您可以使用以下方法从文本框中获取输入：

const inputText = $("#enter").val();

然后您可以选择一个给定的“页面”以显示：

$("#" +inputText);

如果此所选项目的长度为0（即fasley），则该页面不存在，因此您可以显示带有id的{{1}}的div。如果所选项目的长度不为零（真实），则表明所选项目存在，因此您可以使用以下方法显示它：

three

您还可以在$("#" +inputText).show();上添加一个名为class的{{1}}，以便更具体，更轻松地切换其可见性。

请参见下面的工作示例：

page

div

const test = function() {
  const inputText = $("#enter").val();
  $('.page').hide(); // hide all open pages (then later we will show the selected one)
  const elemToShow = $("#" +inputText);
  if(!elemToShow.length) {
    $("#three").show();
  } else {
    $("#" +inputText).show();
  } 
}

Answer 2

可能是因为您重新分配了var v_one的值

var v_one =“一个”; var v_one =“两个”;

Answer 3

您有各种各样的小错误。重新分配v_one变量，如果您应该使用 == 而不是 = ，而您错过了}。我认为仅此而已。如果您已经定义了jquery cdn，请删除我的。

<body>
  <div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>

<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>

<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter"  name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>

function test() {
  var v_input = document.getElementById("enter").value;
  var v_one = "one";
  var v_two = "two";
  if (v_input == v_one) {

     $('#one').show();
     $('#two').hide();
     $('#three').hide();
  }else if (v_input == v_two){
     $('#one').hide();
     $('#two').show();
     $('#three').hide();
}else {
      $('#one').hide();
     $('#two').hide();
     $('#three').show();
  }
}
</script>
</body>

Answer 4

首先，删除所有内联javascript，然后删除所有内联样式。

一旦有了，请为您的元素提供一个通用的类名，以便我们可以将它们隐藏在一行中。

之后，只需取值并将其放入选择器即可。

$('#btn').on('click', () => {
	const value = $('#enter').val();
  $('.showHide').hide();
  $('#' + value).show();
});

.showHide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" class="showHide">
<h1>Page One</h1>
</div>

<div id="two" name="two" class="showHide">
<h1>Page Two</h1>
</div>

<div id="three" name="three" class="showHide">
<h1>Page Three</h1>
</div>
<input type="text" id="enter"  name="enter" value="" />
<input type="button" id="btn" value="Click here">

Answer 5

在定义v_two和if ==时遇到问题

function test() {
var v_input = document.getElementById("enter").value;


var v_one = "one";
var v_two = "two";


if (v_input == v_one) {  

   $('#one').show();
   $('#two').hide();
   $('#three').hide();
}

else if (v_input ==v_two){
   $('#one').hide();
   $('#two').show();
   $('#three').hide();
   
    }
else {
    $('#one').hide();
   $('#two').hide();
   $('#three').show();
}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>

<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>

<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter"  name="enter" value="" />
<input type="button" value="Click here" onclick="test();">



</body>

Answer 6

您的JavaScript中有很多问题：

缺少最后一个括号。
缺少v_two的分配。

为进行比较，您使用了单等号（=），应为双等号（“ ==”）。

<script type="text/javascript">

function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {  

   $('#one').show();
   $('#two').hide();
   $('#three').hide();
}

else if (v_input == v_two){
   $('#one').hide();
   $('#two').show();
   $('#three').hide();
    }
else {
    $('#one').hide();
   $('#two').hide();
   $('#three').show();
}
}

我已经更新了您的JavaScript，希望对您有所帮助。

Answer 7

您可以尝试

 function test() {
    var v_input = document.getElementById("enter").value;
    var v_one = "one";
    var v_two = "two";
    // all are hidden
    $('#one').hide();
    $('#two').hide();
    $('#three').hide();

    var nameId = "#three"; // variable to get id or you can keep this as empty
    if (v_input == v_one) {  
       nameId = '#one';
    } else if (v_input == v_two) {
       nameId = '#two'
    } else {
       nameId = '#three'; // you can use this section for default behaviour 
    }

    // Show selected name
    $(nameId).show();
}

希望这会有所帮助！

Answer 8

尝试一下，让我知道它是否有帮助

function test() {
  var v_input = document.getElementById("enter").value;
  $('#three ,#one ,#two').hide();

  if (v_input == "one" || v_input == "two") {
    $('#' + v_input).show();
  } else {
    $('#three').show();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" style="display:none;">
  <h1>Page One</h1>
</div>

<div id="two" name="two" style="display:none;">
  <h1>Page Two</h1>
</div>

<div id="three" name="three" style="display:none;">
  <h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">

Answer 9

您将需要的是纯Java脚本中的 双向绑定 ，以实现您的目标。

以下是您的代码的基本摘要：

function DataBind(element, data) {
    this.data = data;
    this.element = element;
    element.value = data;
    element.addEventListener("change", this, false);
}

DataBind.prototype.handleEvent = function(event) {
    switch (event.type) {
        case "change": this.change(this.element.value);
    }
};

DataBind.prototype.change = function(value) {
    this.data = value;
    this.element.value = value;
};

var obj = new DataBind(document.getElementById("enter"), "");

var pageField = obj.element;
pageField.onkeydown = updateNameDisplay;
pageField.onkeyup = updateNameDisplay;
pageField.onkeypress = updateNameDisplay;
function updateNameDisplay() {
    //key down event
}

function test() {
var v_one = "one";
var v_two = "two";
if (obj.element.value === v_one) {  

   $('#one').show();
   $('#two').hide();
   $('#three').hide();
}

else if (obj.element.value === v_two){
   $('#one').hide();
   $('#two').show();
   $('#three').hide();
    }
else {
    $('#one').hide();
   $('#two').hide();
   $('#three').show();
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>

<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>

<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">

根据输入值调用特定的div

9 个答案: