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

Question

I'm writing an auction template for eBay, hoping that eBay would allow it. Apparently they don't because jquery has things like string.replace() etc.

The code is very basic.

$(document).ready(function(){

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

    setInterval ( changeImage, 5000 );
});

I basically need to rewrite it in plain Javascript...

Answer 1

If you can live without the fading effect, it should be pretty straightforward:

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

setInterval(changeImage, 5000);

While fading is cool and all, it's really makes the code a lot more complicated, when we not allowed to use external libraries. Basically, you will need to deal with additional timers, firing with very short intervals, changing the opacity of the target element on each callback.

If you really want fading, see "Javascript Tutorial - Simple Fade Animation" .

Answer 2

The most basic of fading, not cross-browser compatible (try in 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>

Answer 3

You could use classList.toggle on your element:

<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>

Answer 4

I had issues with the interval approach. This is what I came up with.

 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>