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中重写它......

Answer 1

如果你可以在没有褪色效果的情况下生活，那应该非常简单：

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

setInterval(changeImage, 5000);

虽然褪色很酷，但是当我们不允许使用外部库时，它确实使代码变得更加复杂。基本上，您需要处理额外的计时器，以非常短的间隔触发，在每次回调时更改目标元素的不透明度。

如果您真的想要淡化，请参阅"Javascript Tutorial - Simple Fade Animation"。

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>

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>

Answer 4

我遇到间隔方法的问题。这就是我想出来的。

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

.show {
  display: block;
}

＆＃13;

<a href="#" onclick="showHide()">Get Details</a>

<div id="hiddenDetails" class="hidden">What you want to show and hide</div>

＆＃13;

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

4 个答案: