-4

at morning, I ask a question about this: to click the element a to change my content.But something I didn't understand why I click again the js maybe my code is even also wrong.

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

I put the code on the jsfiddle: http://jsfiddle.net/Jackyhua/nugyM/ this time, I also want why I write the judgment condition,but my code doesn't work like my brain. I have wrong at the same question about twice.I want get the true tips. the important to me,is not "==" or "===",the point to me is that ,when my "if" is judged,the content changed,but when I click again, there is no change.To me,how to make the element a click again and again is important.

I change the code here.The import is not the "==" ,but http://jsfiddle.net/Jackyhua/nugyM/2/

4

3 回答 3

0 
$(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);
        }
    });
});
于 2013-07-29T09:29:49.380 回答
0 
 if ( $text = $thiss) {  // = will assign the value

它应该是

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

剩余在更新的 JSFiddle中运行良好

尽管分号在 Javascript 中是可选的，但多年来它们被认为是一种很好的做法。 所以在每条语句完成后添加分号。

编辑： 更好的方法是

$(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

于 2013-07-29T09:28:29.457 回答
0

您可以尝试使用切换功能。 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>
于 2013-07-29T09:40:52.323 回答