0

私の目標は、ユーザーが をクリックすると、含まれている内部<div class="title">のテキストが変更され、もう一度クリックすると以前の値に戻ることです。<span><h3>

<div class="title">
    <h3>Text The Doesn't Change <span>Text That Changes</span></h3>
</div>

ただし、divをクリックすると、テキストが1回変更され、何度クリックしても停止します。

コードからスパンの前のテキストを削除すると:

<div class="title">
    <h3><span>Text That Changes</span></h3>
</div>

その後、問題なく動作しますが、特定のアプリケーションにそのテキストが存在する必要があります。

ここに私のjQueryコードがあります:

$('div.title').click(function(){
    $(this).children('h3').children('span').text($(this).text() == '-' ? '+' : '-');;
});

私が何であるかを確認するためのページへのリンクは次のとおりです:デモ

4

2 に答える 2

0

この状態では、間違った要素 ( div.title)にアクセスしています。

$(this).text() == '-' ? '+' : '-'

これは次のようになります。

$('h3 > span', this).text() === '-' ? '+' : '-'

すべてをまとめて次のように減らすことができます。

$('div.title').click(function(){
  var $span = $('h3 > span', this);
  $span.text($span.text() === '-' ? '+' : '-');
});

</p>

于 2012-08-03T17:23:35.690 に答える