如何在没有使用jQuery的情况下切换元素的可见性？

Question

我正在为 eBay 编写一个拍卖模板，希望 eBay 允许。很显然他们不允许，因为 jQuery 有一些像 string.replace() 等的东西。

代码非常基础。

$(document).ready(function(){

    function changeImage(){
        if($("#coin1").css("display") == "none"){  
            $("#coin1").fadeIn("slow");
        }else{  
            $("#coin1").fadeOut("slow");
        }
    };

    setInterval ( changeImage, 5000 );
});

我需要基本上用纯Javascript重写它...

- Jared

Answer 1

如果您可以不使用淡出效果，那么这应该非常简单：

function changeImage() {
    var image = document.getElementById('coin1');
    image.style.display = (image.style.display == 'none') ? 'block' : 'none';
}

setInterval(changeImage, 5000);

虽然淡入淡出很酷，但如果我们不允许使用外部库，它会使代码变得更加复杂。基本上，你需要处理额外的定时器，在每个回调中以非常短的时间间隔触发，并改变目标元素的不透明度。

如果你真的想要淡入淡出，请参见"Javascript教程-简单淡入淡出动画"。

- Jørn Schou-Rode

---

eBay不允许可以替换字符串、修改高级设置的脚本 - 我也不被允许外部链接，但即使您直接将其粘贴到代码中，它也无法工作。 - Jared

我已经更新了我的答案，包括有关淡入淡出的更多信息，并提供了一个“纯”JavaScript实现的链接。 - Jørn Schou-Rode

猜猜看，四年前我们都设法写代码，使用定时器、设置可见性、不透明度等等，没有像现在这样的jQuery库！;-) - naivists

Answer 2

最基本的淡入淡出效果，不适用于所有浏览器（在Chrome中尝试）：

<div id="x" style="background-color: yellow;">
    <a href="#" onclick="fade();">fade me out</a>
</div>

<script type="text/javascript">
    var val = 1.0;
    function fade()
    {
        document.getElementById('x').style.opacity = val;
        val -= 0.1;

        if (val != 0)
        {
            setInterval(fade, 100);
        }
    }
</script>

- Langdon

Answer 3

您可以在元素上使用 classList.toggle ：

<style>
  .hidden { display: none !important; }
</style>

<script>
  function toggle() {
    document.getElementById('elem').classList.toggle('hidden');
  }
</script>

<a href="#" onclick="toggle()">Toggle element</a>

<p id="elem">lorem ipsum quid modo tralala</p>

- rap-2-h

Answer 4

我在间隔方法方面遇到了问题，这是我想出来的解决方案。

function showHide() {
  var element = document.getElementById('hiddenDetails');
  element.classList.toggle("hidden");
}

.hidden {
  display: none;
}

.show {
  display: block;
}

<a href="#" onclick="showHide()">Get Details</a>

<div id="hiddenDetails" class="hidden">What you want to show and hide</div>

- phillipmaddox