ইনপুট মান হিসাবে, নির্দিষ্ট div কল করুন

আমি ইনপুট মান অনুযায়ী নির্দিষ্ট div কল করার চেষ্টা করছি। নিচের প্রত্যাশিত ফলাফল

যদি ইনপুট দায়ের করা "এক" টাইপ ফলাফল "পৃষ্ঠা এক" হিসাবে দেখতে হবে, ইনপুট দায়ের করা হলে "দুই" টাইপ ফলাফল "পৃষ্ঠা দুই" হতে হবে, ইনপুট দায়ের অন্য কিছু টাইপ ফলাফল "পৃষ্ঠা তিন" হতে হবে

<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
আপনি আপনার জাভাস্ক্রিপ্ট পদ্ধতিতে একটি শেষ বন্ধনী অনুপস্থিত।
যোগ লেখক Gaurav, উৎস

7 উত্তর

প্রথম, সব ইনলাইন জাভাস্ক্রিপ্ট মুছে ফেলুন, তারপর সব ইনলাইন শৈলী মুছে ফেলুন।

একবার আমাদের এটি আছে, আপনার উপাদানগুলিকে একটি সাধারণ শ্রেণী নাম দিন যাতে আমরা তাদের একক লাইনে লুকিয়ে রাখতে পারি।

তারপরে, কেবল মানটি গ্রহণ করুন এবং নির্বাচক নির্বাচন করুন।

<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 (যা ফাসলি হয়) তাহলে পৃষ্ঠাটি বিদ্যমান নেই তাই আপনি id এর সাথে <div> তিনটি দিয়ে div প্রদর্শন করতে পারেন </কোড>। যদি নির্বাচিত আইটেমের দৈর্ঘ্য শূন্য (সত্য) নয় তবে তার মানে নির্বাচিত আইটেমটি বিদ্যমান, এবং তাই আপনি এটি ব্যবহার করে দেখাতে পারেন:

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

আপনি পৃষ্ঠা নামক একটি ক্লাস আপনার div এ যোগ করতে পারেন যাতে আপনি তাদের দৃশ্যমানতা আরো বিশেষভাবে এবং সহজেই টগল করতে পারেন।

নীচে কাজ উদাহরণ দেখুন:

<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
যোগ

আপনার জাভাস্ক্রিপ্টে অনেক সমস্যা আছে:

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

আমি আপনার জাভাস্ক্রিপ্ট আশা এটি আপডেট সাহায্য করে।

0
যোগ

আপনার v_two এবং যদি == সংজ্ঞায়িত করতে সমস্যা আছে<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 সিডিএন সংজ্ঞায়িত মুছে ফেলা আছে।

<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
যোগ