Как скрыть элемент в операторе if? - PullRequest
Новая
       3

Как скрыть элемент в операторе if?

0 голосов
/ 26 марта 2020

Я делаю html изменение в CMS, которое будет влиять на все страницы, когда изменения вступят в силу. Я хотел бы, чтобы это предупреждение html затрагивало только одну указанную c страницу. Я пытаюсь сделать оператор if для заголовка страницы.

Логика c такова, что если заголовок страницы равен Test Article Two, тогда покажите html, который я поставил на место, если нет, то display=none. С этим логином c я просматриваю 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>

Ответы [ 3 ]

2 голосов
/ 26 марта 2020

Я бы рекомендовал изменить класс элемента 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>
javascript: просто отметьте 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>
1 голос
/ 26 марта 2020

Если вы создаете stati c страниц или используете рендеринг на стороне сервера, вы можете добавить logi c, чтобы добавить класс для отображения или скрытия элемента alert, не добавляя больше javascript на страницу. Он будет иметь соответствующий класс (ы), когда html генерируется и доставляется. Таким образом, вам не нужно будет создавать функцию, вызывать ее и манипулировать DOM после того, как все будет отображено.

Возможно, я пропустил это в приведенном выше коде. Вы вызываете функцию showAlert где-нибудь? В противном случае ваше предупреждение не будет отображаться (или будет отображаться в зависимости от стилей по умолчанию).

Одна вещь, которую я хотел бы предостеречь, - это обязательный характер кода здесь. Если вы хотите повторно использовать эту функцию оповещения на другой странице, вам нужно будет добавить еще одну логику c, чтобы обнаруживать заголовок другой страницы каждый раз, когда вы хотите использовать оповещение. Поскольку вы используете CMS, вы можете подумать о добавлении флага для отображения предупреждения, и на этой указанной странице c включите этот флаг.

Если вы хотите использовать стратегию функции, я бы установите стили оповещений по умолчанию: 

#alert-dialog {
display: none;
}
.show {
 display: block;
}

и попробуйте что-то вроде этого: 


<script>
  function showAlert() {
    if(document.title === "Test Article Two") {
        document.getElementById('alert-dialog').classList.add('show');
    }
  }

  document.addEventListener("DOMContentLoaded", showAlert);
</script>

Другой вариант - взглянуть на путь страницы, на которой он должен быть ( window.location.pathname) и используя регулярное выражение, чтобы увидеть, соответствует ли оно тому, что вы хотите. Я бы посоветовал пересмотреть заголовок, поскольку скорее всего изменится заголовок страницы, а не URL.

0 голосов
/ 26 марта 2020

В JavaScript вы можете получить доступ к заголовку страницы с помощью document.title. Вы должны изменить скрипт следующим образом: 

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