0

抱歉，如果这是一个愚蠢的问题，但我一直在尝试使用 AJAX 来“实时”显示我的 javascript 变量，但运气不佳。我绝对是初学者，所以这可能是问题哈哈-当我看到 AJAX 代码时，它似乎总是需要一个额外的 url 来刷新，但我只想在点击时刷新 javascript 变量。

http://jsfiddle.net/bagelpirate/m9Pm2/

<script>
var one = 0;
var two = 0;
var three = 0;
</script>

<body>
<div id="div_1">
    One: <script>document.write(one)</script> | 
    Two: <script>document.write(two)</script> | 
    Three: <script>document.write(three)</script>
</div>

<div id="div_2">

    <img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />

    <img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />

    <img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" /> 

</div>
</body>

正如您在上面的代码中看到的，当用户单击其中一张图像时，我想增加计数并将其显示在页面顶部。我找到了 HTML5 输出标签，想知道是否可以使用它来实时显示 javascript 变量？我读过的所有内容似乎都暗示它无法完成，因为输出标签仅适用于表单？无论如何，我想问也无妨！

谢谢你的时间！

4

2 回答 2

1

完成加载后，您不应使用 document.write 写入 DOM。您已经用 jQuery 标记了您的问题，所以我假设您可以使用它来更新内容。相反，从您的脚本块中更新 DOM。这是一个可以帮助您入门的示例。

http://jsfiddle.net/prxBb/

<script type="text/javascript">
    $(function() {
        var one = 0;
        var two = 0;
        var three = 0;

        $('img#mine').click(function() {
            one++;
            $('span#one').html(one);
        });
         $('img#forest').click(function() {
            two++;
            $('span#two').html(two);
        });
         $('img#farm').click(function() {
            three++;
            $('span#three').html(three);
        });
    });
</script>

<body>
<div id="div_1">
    One: <span id="one"></span> | 
    Two: <span id="two"></span> | 
    Three: <span id="three"></span>
</div>

<div id="div_2">

<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />

<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />

<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" /> 

</div>
</body>
于 2013-10-16T15:01:47.017 回答
0

也许您应该尝试将所有变量放在一个命名对象中，以预定义的时间间隔遍历它并显示值。

var varContainer = {
    one:0,
    two:0,
    three:0
};
jQuery("#div_2 img").on('click',function(){
    jQuery.each(varContainer,function(key,value){
        //Add key + value to the DOM
        if(jQuery("."+key+value).length<1)
            jQuery("#div_2").append("<div class='"+key+value+"'></div>");
        var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
        jQuery("."+key+value).html();
    });
});

HTML

<div id="div_2">

</div>

当然，脚本可以升级为在嵌套对象/数组的情况下递归查看每个变量...

希望这可以帮助！

于 2013-10-16T15:08:52.487 回答