用戶輸入的值將變量轉換為文本

Question

我正在嘗試做的是，當用戶輸入的值與兩個變量之一匹配時，我想要輸入的值，然后“觸發”該變量。 因此，基本上，您在提示符下輸入變量的名稱，然后我要一個段落標簽來獲取變量保存的文本。

但是，由於輸入的值成為文本並且根本不會觸發變量，因此我無法使用它。 它只是轉換為純文本。

我希望我提供的代碼片段能清除我要實現的其余功能！

 var help = 'Put me in the paragraph tag please!' var no = 'Or me, either way it\\'s fine!' $('.reset').on('click', function() { $('p').text(''); }); $('.go').on('click', function() { var key = prompt('Enter something bro').toLowerCase(); $('p').text(key); }); 

 button { transition:color .3s; border:none; font-size:18px; color:white; padding:1%; width:100px; cursor:pointer; } button:hover { color:rgba(0,0,0,.7) } .go { background-color:#4CAF50; } .reset { background-color:#f44336; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="reset">Reset</button> <button class="go">Go</button> <p>Replace me</p> 

Answer 1

  var decision={ help : 'Put me in the paragraph tag please!', no : 'Or me, either way it\\'s fine!' } $('.reset').on('click', function() { $('p').text(''); }); $('.go').on('click', function() { var key = prompt('Enter something bro').toLowerCase(); $('p').text(decision[key]); }); 

 button { transition:color .3s; border:none; font-size:18px; color:white; padding:1%; width:100px; cursor:pointer; } button:hover { color:rgba(0,0,0,.7) } .go { background-color:#4CAF50; } .reset { background-color:#f44336; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="reset">Reset</button> <button class="go">Go</button> <p>Replace me</p> 

這是您的問題的簡單解決方案。 將選項存儲為變量而不是對象。 您可以使用對象鍵獲取選項的值。 或者直接獲取對象的屬性。 有關詳細信息，請參見對象和屬性

Answer 2

使用全局窗口輸出值

 var help = 'Put me in the paragraph tag please!' var no = 'Or me, either way it\\'s fine!' $('.reset').on('click', function() { $('p').text(''); }); $('.go').on('click', function() { var key = prompt('Enter something bro').toLowerCase(); $('p').text(window[key]); }); 

 button { transition:color .3s; border:none; font-size:18px; color:white; padding:1%; width:100px; cursor:pointer; } button:hover { color:rgba(0,0,0,.7) } .go { background-color:#4CAF50; } .reset { background-color:#f44336; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="reset">Reset</button> <button class="go">Go</button> <p>Replace me</p> 

Answer 3

使用window[key]

  var help = 'Put me in the paragraph tag please!' var no = 'Or me, either way it\\'s fine!' $('.reset').on('click', function() { $('p').text(''); }); $('.go').on('click', function() { var key = prompt('Enter something bro').toLowerCase(); if(window[key] != undefined ) alert(window[key]); $('p').text(window[key]); }); 

  button { transition:color .3s; border:none; font-size:18px; color:white; padding:1%; width:100px; cursor:pointer; } button:hover { color:rgba(0,0,0,.7) } .go { background-color:#4CAF50; } .reset { background-color:#f44336; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="reset">Reset</button> <button class="go">Go</button> <p>Replace me</p> 

Answer 4

 <script> $(document).ready(function(){ var help = 'Put me in the paragraph tag please!' var no = 'Or me, either way it\\'s fine!' $('.reset').on('click', function() { $('p').text(''); }); $('.go').on('click', function() { var key = prompt('Enter something bro').toLowerCase(); $('p').text(key); }); }); </script> 

您必須使用document.ready函數來執行jquery代碼。

Answer 5

使用window[key]使用輸入文本與變量進行比較

 var help = 'Put me in the paragraph tag please!' var no = 'Or me, either way it\\'s fine!' $('.reset').on('click', function() { $('p').text(''); }); $('.go').on('click', function() { var key = prompt('Enter something bro').toLowerCase(); var name = window[key]; $('p').text(name); }); 

 button { transition:color .3s; border:none; font-size:18px; color:white; padding:1%; width:100px; cursor:pointer; } button:hover { color:rgba(0,0,0,.7) } .go { background-color:#4CAF50; } .reset { background-color:#f44336; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="reset">Reset</button> <button class="go">Go</button> <p>Replace me</p>