入力値に従って、特定のdivを呼び出す

入力値に従って特定のdivを呼び出そうとしています。以下は期待される結果です

入力フィールドの結果に「one」と入力すると、「Page one」と表示されるはずです。 入力フィールドの結果に「two」と入力すると、「page two」となります。 入力フィールドに他のものを入力すると、結果は「3ページ目」になります。

<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;">
    

Page One

  </div>

  <div id="two" name="two" style="display:none;">
    

Page Two

  </div>

  <div id="three" name="three" style="display:none;">
    

Page Three

  </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>

この問題を解決する方法をアドバイスしてください

0
あなたはあなたのjavascriptメソッドの中で最後の括弧が1つ欠けています。
追加された 著者 Gaurav,

7 答え

まず、インラインのJavaScriptをすべて削除してから、インラインのスタイルをすべて削除します。

それができたら、要素に共通のクラス名を付けます。そうすれば、それらを1行で隠すことができます。

その後、単純に値を取り、それをセレクターに入れます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#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">

Page One

</div>

<div id="two" name="two" class="showHide">

Page Two

</div>

<div id="three" name="three" class="showHide">

Page Three

</div>
<input type="text" id="enter"  name="enter" value="" />
<input type="button" id="btn" value="Click here">
</div> </div>

0
追加された

あなたはこれを試すことができます

 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();
}

お役に立てれば!

0
追加された

以下を使ってテキストボックスから入力を得ることができます。

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

そして、あなたはを使用して表示するために与えられた "ページ"を選択することができます:

$("#" +inputText);

この選択されたアイテムの長さが 0 (これはfasleyです)の場合、そのページは存在しないので、 id3にしてdivを表示できます。 選択したアイテムの長さがゼロではない(真の)場合、それは選択したアイテムが存在することを意味するので、次のようにして表示できます。

$("#" +inputText).show();

divpage というクラスを追加して、それらの表示設定をより具体的かつ簡単に切り替えることもできます。

下記の作業例を参照してください。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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();
  } 
}
.page {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page" id="one" name="one">

Page One

</div>

<div class="page" id="two" name="two">

Page Two

</div>

<div class="page" id="three" name="three">

Page Three

</div>
<input type="text" id="enter"  name="enter" value="one" />
<input type="button" value="Click here" onclick="test();">
</div> </div>

0
追加された

JavaScriptには多くの問題があります。

  1. Missing last bracket.
  2. Missing assignment of v_two.
  3. For comparing you have used single equal (=) it should be double equals("==").

    <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が更新されることを願います。

0
追加された

v_twoif == の定義に問題があります<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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;">

Page One

</div>

<div id="two" name="two" style="display:none;">

Page Two

</div>

<div id="three" name="three" style="display:none;">

Page Three

</div>
<input type="text" id="enter"  name="enter" value="" />
<input type="button" value="Click here" onclick="test();">



</body>
</div> </div>

0
追加された

あなたは様々な小さな間違いをしました。 = の代わりに == を使用する必要があり、}を見逃した場合は、v_one変数を再割り当てします。これですべてだと思います。 jQuery cdnがすでに定義されている場合は、mineを削除してください。

<body>
  <div id="one" name="one" style="display:none;">

Page One

</div>

<div id="two" name="two" style="display:none;">

Page Two

</div>

<div id="three" name="three" style="display:none;">

Page Three

</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>
0
追加された

おそらくそれはあなたがvar v_oneの値を再割り当てするからです。

var v_one = "one"; var v_one = "two";

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript