Question

很抱歉，如果这是一个愚蠢的问题，但我一直在尝试使用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变量？我读过的所有东西似乎暗示它无法完成，因为输出标签只适用于表格？无论如何，我觉得要问它不会有害！

谢谢你的时间！

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

Answer 2

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

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>

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

希望这有帮助！

使用html5输出标签来显示javascript变量？

2 个答案: