我正在对 CMS 进行 html 更改，更改生效后将影响所有页面。我希望此 html 警报仅影响 1 个特定页面。我正在尝试为页面标题执行 if 语句。
逻辑是，如果页面标题是测试文章二，则显示我已放置的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>
最佳答案
我建议更改 body 元素上的类，以便您可以使用 CSS 进行样式设置。
- 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>
document.title 并将类添加到 body 元素<script>
if(document.title === "Test Article Two") {
document.body.classList.add("show-alert");
}
</script>
CSS 进行样式设置。始终隐藏#alert-dialog，并且仅当我们将类添加到正文时才显示它。<style>
#alert-dialog {
display: none;
}
.show-alert #alert-dialog {
display: block;
}
</style>
关于javascript - 如何在if语句中隐藏元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60873892/