用户输入的值到变量到文本答案

【问题标题】：user entered value to variable to text用户输入的值到变量到文本
【发布时间】：2017-04-21 04:08:31
【问题描述】：

我正在尝试做什么，当用户输入一个与两个变量之一匹配的值时，我想要输入的值然后“触发”该变量。所以基本上，你在提示符中输入变量的名称，然后我想要一个段落标签来获取变量所包含的文本。

但是我不能让它工作，因为输入的值变成了文本并且根本不会触发变量。它只是转换成纯文本。

我希望我提供的 sn-p 可以清除我想要实现的其余部分！

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>

【问题讨论】：

可能是window[key](arguments)？ Javascript 也有eval()，但出于安全原因，实际上没有人推荐它。例如，如果您在脚本的根目录中有 function one(text) { alert(text); }，这应该可以按预期工作：var funcName = "one"; window[funcName]("hello");

标签： javascript jquery

【解决方案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>

这里有一个简单的解决方案来解决您的问题。将您的选项存储为变量而不是对象。您可以使用 objects 键获取选项的值。或者直接获取对象的属性。详情请参考Objects and Properties

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

您知道答案与我的答案重复吗？
点击post 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 代码..

【讨论】：

无论您编写什么代码都是 100% 正确的，只需使用 $(document).ready(function(){});在你的代码中，就像我在答案中所做的那样。
虽然这解决了部分问题，即在准备好后将事件附加到 DOM，但它并没有解决 OP 的问题，即在字符串中引用一个函数并运行它的名称它，

【解决方案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>

【讨论】：