javascript - 比较 select.val() 和 span.text() 后的错误结果

Question

我有以下问题。
单击按钮 Filter 我想获取所选城市的条目。
所以禁止我写大代码，所以我只显示带有数据的 div。如果需要，我认为您可以添加带有选项的选择。
(选择 id = "cityFilter"，选项:第聂伯、哈尔科夫、利沃夫)

HTML:

<div id="data">
    <div>
        <a class="userEmail" href="#">user1@domain.ua </a>
        <span> user1 </span>
        <span> Dnepr </span>
        <span><input type = "button" value = "x" /></span>
    </div>
    <div>
        <a class="userEmail" href="#">user2@domain.ua </a>
        <span> user2 </span>
        <span> Kharkiv </span>
        <span><input type = "button" value = "x" /></span>
    </div>
    <div>
        <a class="userEmail" href="#"> user3@domain.ua </a>
        <span> user3 </span>
        <span> Lviv </span>
        <span><input type = "button" value = "x" /></span>
    </div>
    <div>
        <a class="userEmail" href="#"> user4@domain.ua </a>
        <span> user4 </span>
        <span> Dnepr </span>
        <span><input type = "button" value = "x" /></span>
    </div>
    <div>
        <a class="userEmail" href="#"> user5@domain.ua </a>
        <span> user5 </span>
        <span> Lviv </span>
        <span><input type = "button" value = "x" /></span>
    </div>
</div>

cityFilter.js(注释中的代码说明):

$(function() {
  //click on button
  $('body > input').on('click', function() {
    //get selected value
    var cityFilter = $('#cityFilter').val();
    //sort out spans which contains city names
    $('#data > div > a + span + span').each(function() {
      //for check the received value
      console.log($(this).text());
      //compare selected value and span text
      if ($(this).text() != cityFilter) {
        console.log('true');
      }
    });
  });
});

我得到了所有 true。问题出在哪里？

Answer 1

你的跨度有前导空格和尾随空格

即"abc"!= "abc"

尝试以下方法:

 if ($(this).text().trim() != cityFilter) {
    console.log('true');
  }