【问题标题】:How do i refresh a divs with oneClick on a image?如何在图像上使用 oneClick 刷新 div?
【发布时间】:2011-06-25 02:28:24
【问题描述】:

我已经搜索过,但我无法理解,因为没有人解释。 所以这就是我想要做的:我想在不重新加载整个页面的情况下刷新 div。像这样:

 <div id="topimage">
 <span id="happysmile"><img alt="happysmile" src="happysmile.png"></a></span>
 <span id="refreshbuttn"><img alt="refreshbuttn" src="refreshbuttn.png"></a></span>
                </div>

<div id="topDatum"><script type="text/javascript">
var mynewdate = new Date();
document.write(mynewdate.getMilliseconds());
</script></div>

所以我只想重新加载“sec”div 而不是 topimage div。只需点击 refreshbuttn.png。

这可能吗,你是怎么做到的?

谢谢,抱歉我的英语不好。

【问题讨论】:

  • 什么是“秒”div?你的意思是“topDatum” div?

标签: javascript jquery ajax onclick refresh


【解决方案1】:

如果“sec” div 是指“topDatum” div,您可以这样做:

示例: http://jsfiddle.net/YCM9m/1/

<div id="topimage">
    <span id="happysmile"><img alt="happysmile" src="happysmile.png"></span>
    <span id="refreshbuttn"><img alt="refreshbuttn" src="refreshbuttn.png"></span>
</div>

<div id="topDatum"></div>

<script type="text/javascript">
    document.getElementById('refreshbuttn').onclick = function() {
        var mynewdate = new Date();
        document.getElementById('topDatum').innerHTML = mynewdate.getMilliseconds();
    }
</script>

这使用document.getElementById 来获取ID 为refreshbuttn 的元素。它为它提供了一个 onclick 处理程序,该处理程序创建一个日期对象,并获取 ID 为 topDatum 的元素并将其 innerHTML 设置为 mynewdate.getMilliseconds() 的值。

【讨论】:

    【解决方案2】:

    如果您正在使用 jQuery,则可以使用以下内容:

    $("#refreshbuttn").click(function(){
        var mynewdate = new Date();
        $("#topDatum").html(mynewdate.getMilliseconds());
    });
    

    它会监听具有 ID refreshbuttn 的对象的点击次数(在这种情况下,对象是 refreshbuttn span)
    当它出现时,它将获得一个新的日期。
    然后它会将 ID topDatum 的对象的 HTML 设置为新的毫秒(在这种情况下,对象是 topDatum DIV).

    Demo here

    【讨论】:

      【解决方案3】:

      这可能会帮助您入门:http://jsbin.com/iwebo4/edit。这是 JavaScript 部分:

      function updateMilliseconds() {
        if (document.getElementById('hello')) {
          document.getElementById('hello').innerHTML
            = new Date().getMilliseconds();
        }
      }
      
      updateMilliseconds();​
      

      【讨论】:

        猜你喜欢
        • 2020-03-19
        • 2014-04-23
        • 2011-04-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-05-15
        • 2017-12-21
        • 2011-01-13
        相关资源
        最近更新 更多