<li> 设置样式时不显示标记。显示 = 无

Question

我正在尝试创建一个toggle按钮，该按钮可以将具有HTML标签"li"的类adsetTarget的标签设置为hidden或点击事件时visible。

在页面加载期间，"li"标签的状态是隐藏的。这是将初始页面加载事件设置为hidden的代码。这是正常工作的。

var appBanners = document.getElementsByClassName('adsetTarget'), i;
    for (var i = 0; i < appBanners.length; i ++) {
        appBanners[i].style.display = 'none';
        }

下面是尝试设置toggle按钮功能的代码。第一次单击时，它正在显示内容，但是再次单击它时，内容没有隐藏，有人可以帮忙吗？

var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
    for (var i = 0; i < adsetTargets.length; i ++) {
        if (adsetTargets[i].style.display = 'none')
        adsetTargets[i].style.display = '';
        else
        adsetTargets[i].style.display = 'none'; //this is not working, I believe
        }

Answer 1

您必须更改以下行：

if (adsetTargets[i].style.display == 'none')

注意到双等于了吗？

Answer 2

您可以使用它来使其对应用于元素的任何样式敏感。它会记住以前的元素样式并重新应用它（理论上呵呵）

function showhide() {
    var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
    for (var i = 0; i < adsetTargets.length; i ++) {
        if (adsetTargets[i].style.display == 'none') {
            adsetTargets[i].style.display = adsetTargets[i].getAttribute('data-previous');
        }
        else {
            adsetTargets[i].setAttribute('data-previous',adsetTargets[i].style.display);
            adsetTargets[i].style.display = 'none'; //this is not working, I believe
        }
     }
}

<ul>
  <li class="adsetTarget" style="display:table">abc</li>
  <li class="adsetTarget"  style="display:block">123</li>
  <li class="adsetTarget"  style="display:inline-block">def</li>
  <li class="adsetTarget"  style="display:inline-block">456</li>
</ul>
<input type="button" onclick="showhide()" value="click me">