用于显示或隐藏元素的 Javascript 和 html

Question

嗨，我认为这很容易，但我现在似乎无法使用它。我想使用 javascript 函数来设置 html 标记的可见性。我意识到下面是错误的，因为 hidden 不需要布尔值。我只是在努力点击最简单的方法是什么？

所以我有一些这样的脚本

<script>
function evaluateBoolean() {
    if (location.hostname.indexOf("someval" > 0) {
        return true;
    } else {
      return false;
    }
</script>

我想用这样的iut

<div hidden="evaluateBoolean()"> this will be shown or displayed depending on the javascript boolean </div>

Answer 1

我建议通过更改 JavaScript 代码中的显示样式来做到这一点。

const el = document.getElementById('container');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', function handleClick() {
    if (el.style.display === 'none') {
        el.style.display = 'block';

        btn.textContent = 'Hide element';
    } else {
        el.style.display = 'none';

        btn.textContent = 'Show element';
    }
    });

Answer 2

你有一个 id 的 div：myDIV

<div id="myDIV" class="card-header">
    Hello World
</div>

然后调用这个 Javascript 函数来显示元素：

function showDiv() {
document.getElementById('myDIV').style.display = "block";
}

而这个隐藏它：

function hideDiv() {
document.getElementById('myDIV').style.display = "none";
}

请注意，您可以通过以下方式隐藏 div：

<div id="myDIV" class="card-header" style="display:none">
    Hello World
</div>

然后调用函数来显示它。

Answer 3

您的触发器必须在您隐藏的元素之外。因为如果隐藏你甚至不能点击。 js函数classList切换会很好。

function evaluateBoolean() {
  const d = document.querySelector('.w div');
  d.classList.toggle('hide');
}

.w {
  height: 40px;
  background: yellow;
}
.hide {
  display: none;
}

<div class="w" onclick="evaluateBoolean()">
  <div> this will be shown or displayed depending on the javascript boolean </div>
</div>

Answer 4

如果您没有使用任何框架（如 angular 或 react），则不能在 html 中显式运行 js，其中允许属性绑定。
为了使用 jsx 实现您的意图，您可以使用以下方法：

1. 添加到您的 div 一个 id：

    <div id="myDiv"> Toggled div </div>
   

2. 在您的 js 脚本中修改您的函数 evaluateBoleean() 以显示/隐藏元素：

   function evaluateBoolean() {
   
   const div = document.querySelector("#myDiv");
   
   if (location.hostname.indexOf("someval" > 0) {
   
       div.hidden = true;
   
   } else {
   
       div.hidden = false;
   }
   

Answer 5

有一个非常简单的选择：-->有一个空白文本首先用这个替换html代码：->

<div hidden="evaluateBoolean()" id="ThingToBeHidden"> this will be shown or displayed depending on the javascript boolean </div>

并输入js代码：-->

document.getElementById("ThingToBeHidden").innerHTML = "";

因此，您已分配 div 以使其具有其他元素所没有的特殊 id。 因此，现在 js 代码选择具有该 id 的 div，然后将其上下文设置为空白。 如果想让文字再次出现，js代码为：-->

document.getElementById("ThingToBeHidden").innerHTML = "this will be shown or displayed depending on the javascript boolean";

Answer 6

您可以通过多种方式隐藏元素（使用 JQuery）：

const o = $(cssSelectorForElementToStyle);
$(o).hide();
$(o).toggle();
$(o).css('display', 'none');
$(o).addClass('css_class_for_hiding_stuff');

这里使用香草javascript：

const o = document.querySelector(cssSelectorForElementToStyle);
o.style.display = 'none';
o.classList.add('css_class_for_hiding_stuff');

但是您的问题并未准确指出您何时进行此项检查。因此，假设您将在页面加载时检查一次布尔值并根据该值隐藏或显示给定元素：

$(document).ready(
    () => {
      if(evaluateBoolean() === true){        
         //do nothing in this case
      }else{
         $('#elementWithThisId').css('display', 'none');
      }
    }
);

没有 JQuery：

document.addEventListener("DOMContentLoaded", function() {

  if(evaluateBoolean() === true){        
    //do nothing in this case
  }else{
    document.querySelector('#elementWithThisId').style.display = 'none';
  }
   
});