资源

Question

在我的网页上，我想“隐藏”或“取消隐藏”已经在DIV元素中的几个元素（本例中为C和F），如：

<div> Select A or B <span name='hide' > or C</span></div>
<div> Also select D or E <span name='hide' > or F</span></div>
(etc)

我在打开页面时使用javascript来隐藏所有“隐藏”元素，除非在localhost上打开页面，而不是显示所有页面。我不一定知道有多少'隐藏'元素（动态生成）。

var hids=document.getElementsByName('hide');
if(hids!=null) {
    for(var j=0; j< hids.length; j++) {
        if(localhost==true) { // only if on localhost
            hids[j].style.visibility='visible';
        }
        else hids[j].style.visibility='hidden';
    }
}

但是，'name'属性对SPAN无效。当我使用DIV而不是SPAN时，它会混淆格式。我该如何正确解决这个问题？

Answer 1

使用class代替name：

<span class="my-class"> or C</span>

和getElementsByClassName代替getElementsByName：

document.getElementsByClassName("my-class");

Answer 2

如果span没有name属性，请尝试使用类名

var hids=document.getElementsByClassName('hide');

并将您的HTML更改为

<div> Select A or B <span class='hide' > or C</span></div>
<div> Also select D or E <span class='hide' > or F</span></div>

Answer 3

您可以使用querySelectorAll按className hide

查找

＆＃13;

var localhost = false;
var hids = document.querySelectorAll('.hide');

if (hids != null) {
  for (var j = 0; j < hids.length; j++) {
    if (localhost) { // only if on localhost
      hids[j].style.visibility = 'visible';
    } else hids[j].style.visibility = 'hidden';
  }
}

＆＃13;

<div> Select A or B <span class='hide'> or C</span></div>
<div> Also select D or E <span class='hide'> or F</span></div>
(etc)

＆＃13;

资源

document.querySelectorAll()

Answer 4

使用data-XXX属性代替name，例如：<span data-name='hide'>

当然，在这种情况下，您需要像这样获取它们：

document.getElementsByTagName("data-name")并根据data-name代码的值进行其他过滤。

Answer 5

我不确定应该在这里使用name属性。我相信名字是独一无二的。所以可能通过课程名称;

let localhost = true;
let hideList = document.getElementsByClassName("hide");

if (hideList != null) {
  for (var j=0; j < hideList.length; j++ ) {
    if (localhost === true) {
  hideList[j].style.visibility = 'visible'
    } else {
      hideList[j].style.visibility = 'hidden'
    }
  }
}

至于<div>弄乱你的格式;这可能是由于样式属性：display。 <span>的行为与display: inline;相似，<div>的行为与display: block;相似。您可以在自己的CSS中覆盖此默认行为。继续将<spans>转换为<div>并应用一些CSS：

<div> Select A or B <div class="hide"> or C</div></div>
<div> Also select D or E <div class="hide"> or F</div></div>

<style>
  .hide {
    display: inline;
  }
</style>

结果在视觉上与使用跨度时相同。

我需要选择多个SPAN元素

5 个答案:

资源