Question

我写了这个简单的代码来理解为什么如果我第二次单击“click me”文本，JQuery不会显示“第二”文本。

<div id="clickme">Click me</div>
<div id="sometext">This is text ZERO</div>

<script type="text/javascript"> 
    $(document).ready(function($) {

        $("#clickme").click(function(){ 
            if (a == 1) {
                $('#sometext').replaceWith('<div id="sometext">This is text TWO</div>');
            }
            else {
                $('#sometext').replaceWith('<div id="sometext">This is text ONE</div>');
                var a = 1;
            }
        });

    });
</script>

我期待以下行为：

页面已加载，显示文本“这是文本ZERO”
我第一次点击链接，JQuery显示'This is text ONE'
我第二次点击链接，jQuery显示'This is text TWO'

而不是处理点＃3或至少不显示文本。为什么呢？

Answer 1

因为a是在本地定义的，所以这是一个范围问题。全局初始化它将起作用。见下文

$(document).ready(function($) {
   var a = 0;
   $("#clickme").click(function(){ 
     if (a == 1) {
       $('#sometext').replaceWith('<div id="sometext">This is text TWO</div>');
     }
     else {
       $('#sometext').replaceWith('<div id="sometext">This is text ONE</div>');
       a = 1;
     }
   });
});

这是一个小提琴

http://jsfiddle.net/jfhartsock/Khp7P/1/

Answer 2

如上所述，这是一个范围问题，变量'a'必须在页面范围内定义，而不是在click事件中定义。

$(document).ready(function($) {
    var a = 0;

    $("#clickme").click(function() {
        if (a == 1) {
            $('#sometext').replaceWith('<div id="sometext">This is text TWO</div>');
            a = 0;
        }
        else {
            $('#sometext').replaceWith('<div id="sometext">This is text ONE</div>');
            a = 1;
        }
    });
});

http://jsfiddle.net/d5xSH/

理解点击行为

2 个答案: