Как установить видимый true или false для класса в html? - PullRequest
0 голосов
/ 09 июля 2019

В этом синтаксисе HTML мы используем кнопку экспорта и ее значок.Мне нужно будет установить visible = true или false на основе значения базы данных IsExport = 0 (или) 1.

Какой будет синтаксис для visible и как передать значение переменной для установки в тег HTML?

<a class="Resource" href="javascript:void(0)">
                <span class="glyphicon icon-export"></span>
                <span class="i18n">export</span>
            </a>

Ответы [ 2 ]

1 голос
/ 09 июля 2019

Нет прямого свойства для установки чего-то вроде Visible = true / false непосредственно в тег HTML, вы можете использовать скрытое свойство, подобное этому:

<a href="#" hidden>

Кроме того, используя javascript, вы можете изменить это, когда захотите

<script>
       $.ajax({
             contentType: 'application/json',
             dataType: 'JSON',
             url: 'someURL',
             type: 'GET',
             success: function (data) {
                        if (data.flagFromDataBase === 1) {
                           document.querySelector('.Resource').style.visibility = "hidden"
                        } else {
                           document.querySelector('.Resource').style.visibility = "visible"
                        }
             },
             failed: function () {
                console.log('Something went wrong :(';              
             }
        });  
</script>

Или, если вы хотите отключить / включить кнопку, но оставить ее видимой, вы можете использовать это вместо document.querySelector().style, используйте это:

if(data.flagFromDataBase === 1) {
   $('#myButton').prop('disabled', true);
} else {
   $('#myButton').prop('disabled', false);
}
0 голосов
/ 09 июля 2019

Не знаю точно, как вы получаете данные с сервера, но я знаю, что есть способ скрыть элементы управления в CSS.Если вы хотите сделать это с помощью HTML, сделайте следующее:

<html>
  <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery1.4/jquery.min.js"></script>
     <script>
         function showButtons () { $('#b1).show(); }
     </script>
     <style type="text/css">
          #b1 {
               display: none;
          }
     </style>
 </head>
 <body>
    <a href="#" onclick="showButtons();">Show me the money!</a>
    <input type="submit" id="b1" value="B1" />
 </body>
</html>

Кредит идет на: скрытое свойство кнопки в html .# B1, # b2 и # b3 - кнопки, которые в вашем случае только одна, так что вы можете изменить это (я уже сделал это для вас).Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...