-4

朝、私はこれについて質問します:要素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/ 今回は、なぜ判定条件を書いたのかも知りたいのですが、私のコードは私の脳のように動作しません。同じ問題で2回ほど間違えました。本当のヒントを知りたいです。私にとって重要なのは、「==」や「===」ではありません。私にとってのポイントは、私の「if」が判断されたときに内容が変更されたが、もう一度クリックしても変化がないということです。要素を何度もクリックさせる方法が重要です。

ここでコードを変更します。インポートは「==」ではなく、http://jsfiddle.net/Jackyhua/nugyM/2/

4

3 に答える 3

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

代わりにトグル機能を使用してみてください。 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 に答える