时间戳

首页 > 解决方案 > 根据 span 标签中数字的大小设置显示属性

javascript - 根据 span 标签中数字的大小设置显示属性

问题描述

我想根据 span 标签中数字的大小来决定是否可以看到图像。

<TIME>TIME : <span id="TIME">0</span>  </TIME>
<img src="sun.png" id="sun" class="sun">
<img src="clock.png" id="clock" class="clock"  height="128px" width="128px" onclick="addToTIME(1)">



<script>
    if ($("#TIME").text() <= 6)
    {
        $('#sun').css('display', 'none');
    }
</script>

但是我的代码不起作用。

标签： javascripthtmlcss

解决方案

你从一开始就隐藏着太阳，但从不把它放回原处display:block

var TIME = 0;

function addToTIME(amount) {
  TIME = TIME + amount;
  document.getElementById("TIME").innerHTML = TIME;
  controlTheSun()
};

$(document).ready(controlTheSun)

function controlTheSun() {
  if ($("#TIME").text() <= 6) {
    $('#sun').css('display', 'none');
  } else {
    $('#sun').css('display', 'block');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TIME>TIME : <span id="TIME">0</span>  </TIME>
<img src="https://us.123rf.com/450wm/chudtsankov/chudtsankov1207/chudtsankov120700038/14510469-summer-hot-sun.jpg?ver=6" id="sun" class="sun" height="128px" width="128px">
<img src="https://images-na.ssl-images-amazon.com/images/I/812L5zyAmpL._AC_SX522_.jpg" id="clock" class="clock" height="128px" width="128px" onclick="addToTIME(1)">

推荐阅读