时间戳

首页 > 解决方案 > 如何在if语句中隐藏元素？

javascript - 如何在if语句中隐藏元素？

问题描述

我正在对 CMS 进行 html 更改，当更改生效时将影响所有页面。我希望这个 html 警报只影响 1 个特定页面。我正在尝试为页面标题做一个 if 语句。

逻辑是，如果页面标题是Test Article Two然后显示我已经放置的 html，如果不是那么display=none。有了这个逻辑，我正在查看所有页面上的 html，而不仅仅是我希望它显示的那个。

<div class="container">
        <div class="title-wrapper">
            <a href="~/@countryText.ToLower()" title="@countryFullText" alt="@countryText"><span id="article-banner-country">@countryFullText</span></a> /
            <a href="@parentUrl" title="@subCatText" alt="@subCatText"><span id="article-banner-category">@subCatText</span></a>
            <div id="article-banner-title">@pageTitle</div>
        <!--page alert -->

          <div class="feedback-container content-desktop" id="alert-dialog">
    <div class="feedback-left">
      <p>Have any feedback? Reach out to us!</p>
        </div>
        <div class="feedback-right">
        <button class="feedback-button">Give Feedback</button>
        <button class="feedback-button">Dismiss</button>
    </div>
        </div>
    </div>
</div>

<script>

function showAlert() { 
     if(@pageTitle === "Test Article Two") {
    document.getElementById('alert-dialog').style.display = 'block'; 
}else {
    document.getElementById('alert-dialog').style.display = 'none'; 
}

}
</script>

标签： javascripthtmlcssif-statement

解决方案

我建议更改body元素上的类，以便您可以CSS用于样式。

  1. HTML：这里没有真正改变
<body>
    <div class="container">
        <div class="title-wrapper">
            <a href="~/@countryText.ToLower()" title="@countryFullText" alt="@countryText"><span id="article-banner-country">@countryFullText</span></a> /
            <a href="@parentUrl" title="@subCatText" alt="@subCatText"><span id="article-banner-category">@subCatText</span></a>
            <div id="article-banner-title">@pageTitle</div>
                <div class="feedback-container content-desktop" id="alert-dialog">
                    <div class="feedback-left">
                        <p>Have any feedback? Reach out to us!</p>
                    </div>
                    <div class="feedback-right">
                        <button class="feedback-button">Give Feedback</button>
                        <button class="feedback-button">Dismiss</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  1. javascript：只需检查document.title并添加body元素的类
<script>
    if(document.title === "Test Article Two") {
        document.body.classList.add("show-alert");
    }
</script>
  1. 用于CSS造型。#alert-dialog当我们将类添加到正文时，始终隐藏并仅显示它。
<style>
    #alert-dialog {
        display: none;
    }
    .show-alert #alert-dialog {
        display: block;
    }
</style>

推荐阅读