javascript - if 语句的嵌套循环问题

Question

我需要有关带有 if 语句的嵌套 for 循环的帮助。我想要做的是仅显示站点上包含在 resultFlats 对象数组 (resultFlats[i].id) 中的 li。 现在它无法正常工作。

从 li 获取号码 id 和从 resultFlats 获取号码 id 工作正常，但 if 语句有问题

var arrayFlats = $('.search-my-house');
// e.g.
var resultFlats = [
  {
    name: "test",
    id: "1"
  },
  {
    name: "test2",
    id: "4"
  }
]

for (var j = 0; j < arrayFlats.length; j++) {
    var number;
    number = $(arrayFlats[j]).children('.apartment-number').text();
    number = number.replace(/\s/g, "");
    number = Number(number);
    for (var i = 0; i < resultFlats.length; i++) {
        var showId = Number(resultFlats[i].id)
        if(showId === number) {
            $(arrayFlats[j]).css('display', 'flex')
        } else {
            $(arrayFlats[j]).css('display', 'none')
        }
    };
};

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">22</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span>
        </a>
    </div>
</li>

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">1</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span>
        </a>
    </div>
</li>

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">184</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span> 
        </a>
    </div>
</li>

Answer 1

您需要添加一个 break 语句，以便当您的条件匹配时，循环中断，并且其他 resultFlats 的 css 不会受到 else 语句的影响。所以，这样做:

if(showId === number)
{
   $(arrayFlats[j]).css('display', 'flex');
   break;
} 
else 
{
   $(arrayFlats[j]).css('display', 'none')
}