0

クリックすると変化するテキストを作成しようとしていますが、もう一度クリックすると元に戻ります。一度、うまくいきます。しかし、もう一度試しても何も起こりません。

私のHTML：

<div id="text">
    <p>TEXT1</p>
</div>

JavaScript/jQuery:

$(document).ready(function(){
    $("#text").click(function(){
        $(this).html("<p>TEXT2</p>").click(function(){
            $(this).html("<p>TEXT1</p>");
        });
        return false;
    });
});

例: http://mkireko.github.io/jQueryExample/

4

5 に答える 5

2

代わりに次のことをお勧めします。

$('#text p').click(function(){
    $(this).text(function(i,t){
        return $.trim(t) === 'text1' ? 'text2' : 'text1';
    });
});

JS フィドルのデモ。

参考文献:

于 2013-10-08T18:12:52.997 に答える
1

ここにいくつかの答えがありますが、うまくいくものもあります。クラスを使用した別のオプションを次に示します。

<div id="text" class="state1">
  <p>TEXT1</p>
</div>

$(document).ready(function(){
  $("#text").click(function(){
    var $this = $(this);
    if ($this.hasClass('state1')) {
      $this.html('<p>TEXT2</p>');
    }
    else {
      $this.html('<p>TEXT1</p>');
    }
    $this.toggleClass('state1');
  });
});

要素内に実際に何が含まれているかに依存しないため、このソリューションにもっと傾倒します。もちろん、それが決して変わらないことがわかっていて、文字列を確実にターゲットにできる場合を除きます。

于 2013-10-08T18:16:41.663 に答える