Question

好的，我已经找了一段时间了，但是我还没有找到解决方案，所以我希望这不是一个愚蠢的问题...

我制作了一个非常简单的网站，可以在您不知道晚餐要做什么的情况下显示随机食谱，如果您知道自己想要什么，我也希望能够搜索食谱，或仅检查拼写错误或其他内容...

食谱只是

中的文字，我已经将它们做成这样

<div id="1" class="recipe">
<h2>name</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>

然后我用这个CSS来隐藏它

.recipe{
display:none;
}

然后我做了一个按钮，随机显示它们（到目前为止，我有15种食谱）

function RandomDiv() {
var myarray= new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15");
var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];

document.getElementById(ChosenDiv).style.display="inline-block";
</scipt>

我不知道是否有更简单的方法可以做到这一点，但到目前为止它仍然有效现在我想在中有一个搜索栏，我可以在其中输入名称，当我按下Submit时，它将向我显示

与按钮相同的方式

我希望这是有道理的，如果我忘记了什么，对不起，请告诉我我做错了

1 个答案:

答案 0 :(得分：0)

Answer 1

Nep，我准备了一个工作示例。如有其他问题，请随时提出。

我已将您的代码分组为函数，注释掉了随机方法，并添加了带有输入的导航栏以搜索配方。

function getReceipes() {
  return document.getElementsByClassName('recipe');
}

function randomDiv() {
  var receipes = getReceipes();

  return receipes[Math.floor(Math.random() * receipes.length)];
}
  
// randomDiv().style.display="inline-block";

document.getElementById('search').addEventListener('keyup', function(e) {
  var searchText = this.value;

  Array.from(getReceipes()).forEach(function(recipe) {
    if (searchText.length === 0) {
       recipe.style.display = 'none';
    } else {
      var nameElement = recipe.getElementsByTagName('h2')[0];
    
      if (nameElement && nameElement.innerText.indexOf(searchText) > -1) {
        recipe.style.display = 'inline-block';
      } else {
        recipe.style.display = 'none';
      }
    }
  });
});

.recipe {
 display:none;
}

<nav>
  <input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
  <div id="1" class="recipe">
    <h2>first</h2>
    <h3>stuff I need</h3>
    <ul>
      <li>stuff</li>
    </ul>
    <h3>how to</h3>
    <p>how to text</p>
    <h1>time</h1>
</div>
 <div id="2" class="recipe">
    <h2>second</h2>
    <h3>stuff I need</h3>
    <ul>
      <li>stuff</li>
    </ul>
    <h3>how to</h3>
    <p>how to text</p>
    <h1>time</h1>
</div>
</main>

简单搜索栏，显示<div>

1 个答案: