Javascript 根据JSON键更改搜索值的字体颜色_Javascript_Json_Search_Fonts_Colors

Javascript 根据JSON键更改搜索值的字体颜色

javascript json search fonts colors

Javascript 根据JSON键更改搜索值的字体颜色,javascript,json,search,fonts,colors,Javascript,Json,Search,Fonts,Colors,我正在做一个javascript练习，想在上面添加额外的功能以供练习。我想做的是根据JSON文件中的某个值更改gem的字体颜色（“JSON文件中的Page”值） HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

我正在做一个javascript练习，想在上面添加额外的功能以供练习。我想做的是根据JSON文件中的某个值更改gem的字体颜色（“JSON文件中的Page”值）

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="https://kit.fontawesome.com/4b3dad3b33.js" crossorigin="anonymous"></script>
    <title>Messing With Gems (JSON)</title>
</head>
<body>
<div class="containter mt-5">
    <div class="row">
        <div class="col-md-6 m-auto">
            <h3 class="text-center mb-3">
                <i class="fas fa-gem"> Gem Look Up</i>
            </h3>
            <div class="form-group">
                <input type="text" id="search" class="form-control form-control-lg" 
                placeholder="Type gem/skill name..." />
                <div id="match-list"></div>
            </div>
        </div>
    </div>
</div>
<script src="js/main.js"></script>
</body>
</html>

这是一个实时版本的搜索，为什么不先获取json呢？如果你不需要的话，我不会获取每个输入事件。使用一个条件并设置一个HTML类。一般来说，我对所有这些都很陌生。这就是他们在练习中所做的。我愿意学习更好的方法来做事情，但如果你想详细说明或给我举个例子，说明你的意思，那将是非常棒的：）我真的只是想把项目搞得一团糟，学习如何使用javascript操作json。我尝试了一些类似if（matches.primaryattribute=='strength'）{matches.Page.style.color='red'；}`

matches

是一个数组。如果您使用的是

.innerHTML

，我不推荐使用，那么在将元素附加到DOM后，您需要使用标准JavaScript方法获取所需的元素。假设您使用了

match.pramaryattribute

和

match.Page

…仍然

match.Page

必须是一个数组由于fetch是一个JSON文件，所以它不是，因为这将是无效的JSON。

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

// Search gems.json and filter it
const searchGems = async searchText =>  {
    const res = await fetch('../data/gemz.json');
    const gems = await res.json();

// Get Matches to current text input
let matches = gems.filter(gem => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return gem.Page.match(regex);
});


if(searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
}
outputHtml(matches);

};

//Show Results in HTML
const outputHtml = matches => {
    if(matches.length > 0) {
      const html = matches.map(match => `
      <div class="card card-body mb-1">
      <h4>${match.Page}</h4> <em>(${match.gemdiscription})</em> <span class="text-primary">
      ${match.gemtags}</span>
      </div>
      `).join('');
matchList.innerHTML = html;
    }       


};

search.addEventListener('input', () => searchGems(search.value));

    {
        "Page": "Frostbite",
        "gemdiscription": "Curses all targets in an area, 
making them less resistant to cold damage and giving them a chance to be frozen by cold damage.",
        "gemtags": [
            "Spell",
            "AoE",
            "Duration",
            "Curse",
            "Cold"
        ],
        "primaryattribute": "intelligence",

    }