1

我在 CodePen 上发现了一些奇怪的东西。如果我来自函数return的模板文字，它会返回一个空字符串。如果我首先将完全相同的模板文字分配给一个变量，然后return是该变量，它将返回预期的字符串。

如果我以全页视图或调试模式查看笔，问题就会消失。

我的问题是，我是否在 CodePen 中发现了一个错误，或者我是否忽略了我做错了什么？

CodePen 演示：http ://codepen.io/VAggrippino/pen/VPbYwM

以下代码片段可能毫无意义，因为它似乎只是 CodePen 的一个问题......

window.onload = function() {
  const useVariable = document.getElementById('useVariable');
  const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

  const cities = [];
  fetch(endpoint)
    .then(response => response.json())
    .then(data => cities.push(...data));

  function findMatches(wordToMatch, cities) {
    return cities.filter(place => {
      const regex = new RegExp(wordToMatch, 'gi');
      return place.city.match(regex) || place.state.match(regex);
    });
  }

  function displayMatches() {
    const matchArray = findMatches(this.value, cities);
    const html = matchArray.map(place => {
      if (useVariable.checked) {
        let listItem = `
          <li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
          </li>
        `;
        return listItem;
      } else {
        return `
          <li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
          </li>
        `;
      }
    }).join('');
    console.log('"' + html + '"');
    suggestions.innerHTML = html;
  }
  
  const searchInput = document.querySelector('.search');
  const suggestions = document.querySelector('.suggestions');

  searchInput.addEventListener('change', displayMatches);
  searchInput.addEventListener('keyup', displayMatches);
}
html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.search {
  width: 100%;
  padding: 20px;
}

.search-form {
  max-width: 400px;
  margin: 50px auto;
}

input.search {
  margin: 0;
  text-align: center;
  outline: 0;
  border: 10px solid #F7F7F7;
  width: 120%;
  left: -10%;
  position: relative;
  top: 10px;
  z-index: 2;
  border-radius: 5px;
  font-size: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}

.suggestions {
  margin: 0;
  padding: 0;
  position: relative;
  /*perspective:20px;*/
}

.suggestions li {
  background: white;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 20px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}

.suggestions li:nth-child(even) {
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%);
}

.suggestions li:nth-child(odd) {
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%);
}

span.population {
  font-size: 15px;
}

.details {
  text-align: center;
  font-size: 15px;
}

.hl {
  background: #ffc600;
}

.love {
  text-align: center;
}

a {
  color: black;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
<form class="search-form">
  <label><input type="checkbox" id="useVariable">Use Variable</label>
  <input type="text" class="search" placeholder="City or State">
  <ul class="suggestions">
    <li>Filter for a city</li>
    <li>or a state</li>
  </ul>
</form>

您可能会从#Javascript30 中认出这段代码。这是挑战#6。

4

2 回答 2

0

CodePen 团队能够通过他们的 Twitter 帐户确认这是 CodePen 中的一个错误：

https://twitter.com/VAggrippino/status/822727824599490560

我曾希望他们中的一个也会在这里发布答案，但看起来它不会发生。

于 2017-01-27T05:59:30.337 回答
-1

您的问题是第 32 行中的编码字符。该字符在模板文字中引发错误，这就是它不起作用的原因。我刚把你的笔分叉修好了。在这里查看。

`<li><span class='name'>${place.city}, ${place.state} </span>
    <span class='population'>${place.population}</span>
/* <-- here was your problem */ </li>`

http://codepen.io/damianfabian/pen/XpRmBW?editors=0011

于 2017-01-21T13:40:15.320 回答