Question

首先让我先谈谈，在网络开发方面，我就像钓鱼一样。我是一名C / C ++，Labview开发人员，从未接触过HTML，JQuery代码。

我开发了一个记录器，用于在HTML文件中显示错误，警告和其他信息。我已经成功地编写了JQuery代码来显示/隐藏div，具体取决于按钮点击。例如;错误按钮仅显示红色字体等错误。

现在我正在尝试引入一个文本框，根据文本值显示/隐藏div。我有一些代码已实现但无法正常工作。这是代码;

<button id="showError">Show Error</button> 
<button id="showDebug">ShowDebug</button>
<button id="showAll">Show All</button>
<input type="text" name="keywords">

<script>
  $("#showError").click(function () {  
    $('div[id^="error"]').show();
    $('div[id^="debug"]').hide();
  });
  $("#showDebug").click(function () {  
    $('div[id^="error"]').hide();
    $('div[id^="debug"]').show();
  });
  $("#showAll").click(function () {  
    $('div[id^="error"]').show();
    $('div[id^="debug"]').show();
  });  

  // this is where i need the help! I can't 
  // the regular expression to execute. 
  $('.keywords').keyup(function() {
      var value = $(this).val();
      var exp = new RegExp('^' + value, 'i');

      $('div[id^="error"]').each(function() {
          var isMatch = exp.test($(this).text());
          $(this).toggle(isMatch);
      });
  });
  // End of problem
</script>
<div style="color: rgb(51, 51, 255);" id="error">20140124_145317 -    MainLoop:  LoadTestStationConfiguration   </div>
<div style="color: rgb(51, 51, 0);" id="debug">20140124_145338 -    MainLoop:  ReadConfigData   </div>
<div style="color: rgb(51, 51, 255);" id="error">20140124_145338 -    SecondLoop:  CheckForNewSoftwareVersion   </div>

因此，如果输入文本值= SecondLoop，则只显示最后一个div元素。如果输入文本值= MainLoop，则会显示前2个元素。

感谢您花时间阅读本文，这是我第一次在浏览器中编程！（与C ++不同;））

Answer 1

$('.keywords')

错误使用选择器，改为

$('input[name=keywords]')

Answer 2

$('.keywords').keyup(function() {

这不会选择您的文字输入，因为您的输入标识为name而不是class。

这就是你想要的：

$('input[name=keywords]').keyup(function() {

无关，您的代码末尾有多个<div>且ID相同。 只有第一个会受到影响，除非您更改ID或使用class="error"代替id="error"

Answer 3

第一个问题，您正在使用$('.keywords')。 .前缀通过类获取元素，而不是名称。要使用名称＆＃39;关键字＆＃39;来获取元素，您可以使用$('[name="keywords"]')。

其次，看起来您对哪些属性用于哪些情况感到有点困惑。一个重要的规则是，页面上永远不应该有多个具有相同ID的元素。因此，您有两个<div>个元素，其中id为＆＃39;错误＆＃39;是无效的。这些应该是类而不是ID。 name属性用于表单中的元素。提交表单后，值将以name属性作为密钥发送到Web服务器。

现在我们已经清除了何时使用id与class与name的对比，您可能更有意义使用id ＆＃39;关键字＆＃39;的属性元件。看起来只有一个关键词＆＃39;元素，我没有看到表格。

您正在使用的选择器（如$('div[id^="error"]')）对您的方案非常有用。此选择器正在执行的操作是，将任何<div>元素的id属性从字符串＆＃39;错误＆＃39;开始。因此，它将获得以下任何元素：

<div id="error"></div>
<div id="error2"></div>
<div id="errorblahzasoidjren"></div>

我在代码中没有看到这样的情况，所以只使用$('#error')也是一样，但如果你按照我之前的建议，那么你可以将它们转换为{{1相反，我会使用class。

另一件事是，您似乎依赖于用户在框中键入正确的文本以触发操作。更直接的方法可能是使用$('.error')元素。这将准确定义可以输入的值，并让用户只需单击以选择他们想要的值。这是您的代码，使用以下建议进行清理：

<select>

根据输入字段中的文本隐藏/显示div元素

3 个答案:

这就是你想要的：