Question

在早上，我问一个关于这个的问题：点击元素a来改变我的内容。但是我不明白为什么我再次点击js也许我的代码甚至也错了。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    #google p {
        display: inline-block; 
        margin-right: 20px; 
    } 
</style>
<script src="../jquery-1.10.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var obj = $("#google a")
        var $text = obj.text()
        var $thiss = 'this'
        var $thats = 'that'
        var $yes = 'yes'
        var $no = 'no'
        obj.click(function() {
            if ( $text === $thiss) {
                $("#google > p").empty()
                $("#google > p").append($yes)
            } else {
                $("#google > p").empty()
                $("#google > p").append($no)
            }
        })
    }) 
</script>
</head>
<body>
   <div id="google">
      <p>no</p><a href="javascript:void(0);">this</a>
   </div>
</body>
</html>

我把代码放在jsfiddle上：http://jsfiddle.net/Jackyhua/nugyM/ 这一次，我也想知道为什么我要写判断条件，但我的代码不像我的大脑那样工作。我在同一个问题上错了两次。我想得到真正的提示。对我来说重要的不是“==”或“===”，对我来说，当我的“if”被判断时，内容发生了变化，但当我再次点击时，没有变化。对我来说，如何让元素一次又一次地点击是很重要的。

我在这里更改了代码。导入不是“==”，而是http://jsfiddle.net/Jackyhua/nugyM/2/

Answer 1

 if ( $text = $thiss) {  // = will assign the value

应该是

 if ( $text == $thiss) {  // == or === strict comparison operator

剩余在Updated JSFiddle

中运作良好

Though semi-colons are optional in Javascript, but they are considered as a good practice for years.所以添加分号，每个陈述完成后。

编辑：更好的方法是

$(function () {
    var obj = $("#google a");
    obj.on('click', function () {
        if (obj.text() === 'this') {  // instead of assigning text to a variable,
            $("#google > p").empty(); // better have it dynamically
            $("#google > p").append('yes');
            $('#google a').empty();
            $('#google a').append('that');
        } else {
            $("#google > p").empty();
            $("#google > p").empty();
            $("#google > p").append('no');
            $('#google a').empty();
            $('#google a').append('this');
        }
    });
});

JSFiddle

Answer 2

$(function() {
    var obj = $("#google a");
    var $text = obj.text();
    var $thiss = 'this';
    var $thats = 'that';
    var $yes = 'yes';
    var $no = 'no';
    obj.click(function() {
        if ($text === $thiss) {
            $("#google > p").empty();
            $("#google > p").append($yes);
        } else {
            $("#google > p").empty();
            $("#google > p").append($no);
        }
    });
});

Answer 3

您可以尝试使用切换功能。 http://api.jquery.com/toggle/

$(function() {
    var obj = $("#google a")
    var $text = obj.text()
    var $thiss = 'this'
    var $thats = 'that'
    var $yes = 'yes'
    var $no = 'no'
    obj.click(function() {
        $("#google > p").toggle();
    })
}) 

<div id="google">
    <p style='display:none'>no</p><p>yes</p><a href="javascript:void(0);">this</a>
</div>

我不知道为什么我的代码可以像我想的那样再次点击

3 个答案: