2

ユーザーがリンクをクリックしたときにテキストを含むdivを表示する機能に取り組んでいます。

リンクは最初にテキスト「show+」を表示し、次にdivが表示されると、このテキストは「hide-」に変わります。コードは以下のとおりです。

JQUERY

    <script>
    $(document).ready(function() {
    $('p.link + div').hide();
    $('p.link a').prepend('<span>info +</span> ');

    $('p.link a').click(function(e) {
     var vis = $(this).parent().next().toggle().is(':visible');
     $(this).find('span').text(vis ? 'hide -' : 'info +');
     e.preventDefault();
    });
    });
    </script>

HTML

    <p class="link"><a href="#" class="show-hide"> </a></p>

    <div class="info">

    <p>Some sample text to show and hide</p>

    </div> <!-- info -->

これはすべて正常に機能していますが、すぐに表示/非表示にするのではなく、トグルに速度を追加してテキストを徐々に表示することを決定しました。したがって、次の行を修正しました。

JQUERY

    var vis = $(this).parent().next().toggle("slow").is(':visible');

これにより、必要なトランジション効果が得られますが、リンクテキストは変更されていません。最初は「info+」と表示されますが、その後、divが表示されているかどうかに関係なく、リンクテキストは「hide-」と表示されます。

これは、コードがdivを表示していない場合でも常に表示しているためだと思いますが、これを修正する方法がわかりません。

どんな助けでもいただければ幸いです。

ありがとう

4

2 に答える 2

2

のコールバック引数を使用してtoggle、遷移の直後にステートメントを実行しようとするのではなく、遷移が完了した後にステートメントを実行します。

var span = $(this).find('span');
$(this).parent().next().toggle("slow", function() {
  span.text($(this).is(":visible") ? 'hide -' : 'info +');
});

JSFiddle

于 2012-11-21T16:18:17.510 に答える
1

それが起こっている理由はかなり簡単です。フェードした直後にチェックを行うと、次のようになります。要素をフェードインすると、非表示になっていないことを意味し、表示されていることを意味します。要素をフェードアウトすることは、要素が非表示になっていないことを意味します。つまり、要素が表示されていることを意味します。

最初に状態を保存できます。

var elem = $(this).parent().next();
var vis = elem.is(':visible');
elem.toggle("slow");

または、状態をクラスに保存します(ユーザーが連続してクリックした場合にうまく機能します)

var vis = $(this).parent().next().toggleClass("visible").toggle("slow").hasClass("visible");
于 2012-11-21T16:20:06.460 に答える